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 { products as fixtures } from "@/__fixtures__/initialProducts"
import { setupStore } from '../store';

export default function TabLayout() {
  const colorScheme = useColorScheme();
  const store = setupStore({
    products: fixtures.map(p => p.asObject)
  });
  return (
    <Provider store={store}>
      <Tabs
        screenOptions={{
          tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
          headerShown: false,
        }}>
        <Tabs.Screen
          name="index"
          options={{
            title: 'Home Screen',
            tabBarIcon: ({ color, focused }) => (
              <TabBarIcon name={focused ? 'scale' : 'scale-outline'} color={color} />
            ),
          }}
        />
        <Tabs.Screen
          name="product-editor"
          options={{
            title: 'Products',
            tabBarIcon: ({ color, focused }) => (
              <TabBarIcon name={focused ? 'list' : 'list-outline'} color={color} />
            ),
          }}
        />
      </Tabs>
    </Provider>
  );
}