import { type FC } from 'react'
import SideBar from '../shared/SideBar'
import Header from '../shared/Header'
import { Route, Routes } from 'react-router-dom'
import Footer from '../shared/Footer'
import { clx } from '../helpers/utils'
import { useSharedStore } from '../shared/store/sharedStore'
import FoodsList from '@/pages/food/List'
import { Pages } from '@/config/Pages'
import CreateFood from '@/pages/food/Create'
import UpdateFood from '@/pages/food/Update'
import CategoryFood from '@/pages/food/Category'
import CustomersList from '@/pages/customers/List'
import CustomerDetails from '@/pages/customers/Details'
import CreateCustomer from '@/pages/customers/Create'
import OrdersList from '@/pages/orders/List'
import OrderDetails from '@/pages/orders/Details'
import CommentsList from '@/pages/comments/List'
import CommentsDetails from '@/pages/comments/Details'
import ScheduleList from '@/pages/schedule/List'
import CreateSchedule from '@/pages/schedule/Create'
import RolesList from '@/pages/roles/List'
import CreateRole from '@/pages/roles/Create'
import UpdateRole from '@/pages/roles/Update'
import UpdateSchedule from '@/pages/schedule/Update'
import Setting from '@/pages/settings/Setting'
import PaymentMethodsList from '@/pages/paymentMethods/List'
import CreatePaymentMethod from '@/pages/paymentMethods/Create'
import UpdatePaymentMethod from '@/pages/paymentMethods/Update'
import AdminList from '@/pages/admin/List'
const MainRouter: FC = () => {

    const { hasSubMenu } = useSharedStore()

    return (
        <div className='p-4 overflow-hidden'>
            <SideBar />
            <Header />
            <div className={clx(
                'flex-1 xl:ms-[269px] mt-[68px] xl:mt-[81px]',
                hasSubMenu && 'xl:ms-[305px]',
            )}>
                <div className={clx(
                    `overflow-auto w-[${window.innerWidth}] max-h-[calc(100vh-113px)]`,
                )}>
                    <div className='pb-20'>
                        <Routes>
                            <Route path={Pages.foods.list} element={<FoodsList />} />
                            <Route path={Pages.foods.add} element={<CreateFood />} />
                            <Route path={Pages.foods.update + ':id'} element={<UpdateFood />} />
                            <Route path={Pages.foods.category} element={<CategoryFood />} />
                            <Route path={Pages.customers.list} element={<CustomersList />} />
                            <Route path={Pages.customers.detail + ':id'} element={<CustomerDetails />} />
                            <Route path={Pages.customers.add} element={<CreateCustomer />} />
                            <Route path={Pages.orders.list} element={<OrdersList />} />
                            <Route path={Pages.orders.detail + ':id'} element={<OrderDetails />} />
                            <Route path={Pages.comments.list} element={<CommentsList />} />
                            <Route path={Pages.comments.detail + ':id'} element={<CommentsDetails />} />
                            <Route path={Pages.schedule.list} element={<ScheduleList />} />
                            <Route path={Pages.schedule.create} element={<CreateSchedule />} />
                            <Route path={Pages.schedule.update + ':id'} element={<UpdateSchedule />} />
                            <Route path={Pages.roles.list} element={<RolesList />} />
                            <Route path={Pages.roles.add} element={<CreateRole />} />
                            <Route path={Pages.roles.update + ':id'} element={<UpdateRole />} />
                            <Route path={Pages.setting} element={<Setting />} />

                            <Route path={Pages.payment_methods.list} element={<PaymentMethodsList />} />
                            <Route path={Pages.payment_methods.add} element={<CreatePaymentMethod />} />
                            <Route path={Pages.payment_methods.update + ':id'} element={<UpdatePaymentMethod />} />

                            <Route path={Pages.admins.list} element={<AdminList />} />
                        </Routes>
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    )
}

export default MainRouter