import { Tabs } from "expo-router";

import { SvgUri } from "react-native-svg";
import { Colors } from "@/constants/Colors";
import { useColorScheme } from "@/hooks/useColorScheme";
import { TabBarIcon } from "@/components/navigation/TabBarIcon";
import { Provider } from "react-redux";
import fixtures from "@/__fixtures__/initialProducts";
import { setupStore } from "../store";

const CARPET_ROLL_SVG = "/assets/images/icons/icon-carpet-roll-raw.svg";
const CARPET_ROLL_SELECTED_SVG =
  "/assets/images/icons/icon-carpet-roll-selected-raw.svg";

const CarpetRollIcon = ({ selected }: { selected: boolean }) => {
  const uri = selected ? CARPET_ROLL_SELECTED_SVG : CARPET_ROLL_SVG;
  return <SvgUri width="2em" height="2em" uri={uri} />;
};

export default function TabLayout() {
  const colorScheme = useColorScheme();
  const store = setupStore({
    products: fixtures,
  });
  return (
    <Provider store={store}>
      <Tabs
        screenOptions={{
          tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
          headerShown: false,
        }}
      >
        <Tabs.Screen
          name="index"
          options={{
            title: "Plywood",
            tabBarIcon: ({ color, focused }) => (
              <TabBarIcon
                name={focused ? "scale" : "scale-outline"}
                color={color}
              />
            ),
          }}
        />
        <Tabs.Screen
          name="carpet-roll-calculator"
          options={{
            title: "Carpet Roll Calculator",
            tabBarIcon: ({ color, focused }) => (
              <CarpetRollIcon selected={focused} />
            ),
          }}
        />
        <Tabs.Screen
          name="product-editor"
          options={{
            title: "Edit Products",
            tabBarIcon: ({ color, focused }) => (
              <TabBarIcon
                name={focused ? "list" : "list-outline"}
                color={color}
              />
            ),
          }}
        />
      </Tabs>
    </Provider>
  );
}