import { Motion } from "@legendapp/motion";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import React from "reactn";
import { useGlobal } from "reactn";
import { Palette } from "../styles";
import { Routes } from "./Routes";
import { tabs } from "../assets";
import TabBar from "./TabBar";
import { Platform } from "react-native";
import HitParade from "../screens/HitParade/HitParade.js";
import Library from "../screens/Library/Library";
import Playbacks from "../screens/Playbacks/Playbacks";
import Profile from "../screens/Profile/Profile.js";
import HomeStack from "./HomeStack";

const BottomTab = createBottomTabNavigator();

export const BottomTabScreen = () => {
  const [currentUID] = useGlobal("currentUID");
  const isAuthenticated = !!currentUID;

  const renderIcon = (icon, focused) => (
    <Motion.Image
      resizeMode={"contain"}
      animate={{
        tintColor: focused ? Palette.white : "#cacacaff",
      }}
      transition={{ type: "spring", damping: 18, mass: 0.7 }}
      style={[
        {
          width: Platform.OS === "web" ? 30 : 24,
          height: Platform.OS === "web" ? 30 : 24,
        },
      ]}
      source={icon}
    />
  );

  return (
    <BottomTab.Navigator tabBar={(props) => <TabBar {...props} />}>
      <BottomTab.Screen
        name={Routes.HomeStack}
        component={HomeStack}
        options={{
          tabBarLabel: "Créer",
          headerShown: false,
          tabBarShowLabel: true,
          tabBarIcon: ({ focused }) => renderIcon(tabs.addTab, focused),
        }}
      />
      <BottomTab.Screen
        name={Routes.HitParade}
        component={HitParade}
        options={{
          tabBarLabel: "Hit Parade",
          headerShown: false,
          tabBarShowLabel: true,
          tabBarIcon: ({ focused }) => renderIcon(tabs.ribbon, focused),
        }}
      />
      <BottomTab.Screen
        name={Routes.Playbacks}
        component={Playbacks}
        options={{
          tabBarLabel: "Playbacks",
          headerShown: false,
          tabBarShowLabel: true,
          tabBarIcon: ({ focused }) => renderIcon(tabs.mic, focused),
        }}
      />
      <BottomTab.Screen
        name={Routes.Library}
        component={Library}
        options={{
          tabBarLabel: "Librairie",
          headerShown: false,
          tabBarShowLabel: true,
          tabBarIcon: ({ focused }) => renderIcon(tabs.albums, focused),
          hide: !isAuthenticated,
        }}
      />
      <BottomTab.Screen
        name={Routes.Profile}
        component={Profile}
        initialParams={{ noBack: true }}
        options={{
          tabBarLabel: "Profil",
          headerShown: false,
          tabBarShowLabel: true,
          tabBarIcon: ({ focused }) => renderIcon(tabs.person, focused),
          hide: !isAuthenticated,
        }}
      />
    </BottomTab.Navigator>
  );
};