import { Tabs } from "expo-router";

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 CarpetRoleSvg = require("@/assets/images/icons/icon-carpet-roll.svg");
const CarpetRoleSelectedSvg = require("@/assets/images/icons/icon-carpet-roll-selected.svg");

const CarpetRollIcon = ({ selected }: { selected: boolean }) => {
  return selected ? CarpetRoleSelectedSvg : CarpetRoleSvg;
};

export default function TabLayout() {
  const colorScheme = useColorScheme();
  const store = setupStore({
    products: fixtures,
    units: "ft",
  });
  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="product-editor"
          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>
  );
}