import {createDrawerNavigator} from '@react-navigation/drawer'
import {IconButton} from 'react-native-paper'
import BestPage from './BestPage'
import {DrawerParamList} from './drawer-param-list'
import HomePage from './HomePage'
import PlanPage from './PlanPage'
import SettingsPage from './SettingsPage'
import TimerPage from './TimerPage'
import useDark from './use-dark'
import WorkoutsPage from './WorkoutsPage'

const Drawer = createDrawerNavigator<DrawerParamList>()

export default function Routes() {
  const dark = useDark()

  return (
    <Drawer.Navigator
      screenOptions={{
        headerTintColor: dark ? 'white' : 'black',
        swipeEdgeWidth: 1000,
        headerShown: false,
      }}>
      <Drawer.Screen
        name="Home"
        component={HomePage}
        options={{drawerIcon: () => <IconButton icon="home" />}}
      />
      <Drawer.Screen
        name="Plans"
        component={PlanPage}
        options={{drawerIcon: () => <IconButton icon="event" />}}
      />
      <Drawer.Screen
        name="Best"
        component={BestPage}
        options={{drawerIcon: () => <IconButton icon="insights" />}}
      />
      <Drawer.Screen
        name="Workouts"
        component={WorkoutsPage}
        options={{drawerIcon: () => <IconButton icon="fitness-center" />}}
      />
      <Drawer.Screen
        name="Timer"
        component={TimerPage}
        options={{drawerIcon: () => <IconButton icon="access-time" />}}
      />
      <Drawer.Screen
        name="Settings"
        component={SettingsPage}
        options={{drawerIcon: () => <IconButton icon="settings" />}}
      />
    </Drawer.Navigator>
  )
}