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 Create from '../pages/category/Create'
import List from '../pages/category/List'
import Update from '../pages/category/Update'
import { Pages } from '../config/Pages'
import Variant from '../pages/category/Variant'
import Attributes from '../pages/category/Attributes'
import CreateProduct from '../pages/products/Create'
import ListProduct from '../pages/products/List'
import UpdateProduct from '../pages/products/Update'
import ProductVariant from '@/pages/products/ProductVariant'
import BrandList from '@/pages/brand/List'
import BrandCreate from '@/pages/brand/Create'
import WarrantyList from '@/pages/warranty/List'
import CreateWarranty from '@/pages/warranty/Create'
import Native from '@/pages/orders/Native'
import OrdersSeller from '@/pages/orders/Seller'
import CancellationCategories from '@/pages/orders/CancellationCategories'
import ReturnCategories from '@/pages/orders/ReturnCategories'
import OrderDetail from '@/pages/orders/Detail'
import BlogsList from '@/pages/blogs/List'
import CreateBlog from '@/pages/blogs/Create'
import UpdateBlog from '@/pages/blogs/Update'
import ShippingList from '@/pages/shipment/List'
import CreateShipment from '@/pages/shipment/Create'
import CouponList from '@/pages/Coupon/List'
import CreateCoupon from '@/pages/Coupon/Create'
import UpdateCoupon from '@/pages/Coupon/Update'
import UsersList from '@/pages/user/List'
import AdminList from '@/pages/admin/List'
import AdminCreate from '@/pages/admin/Create'

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.category.create} element={<Create />} />
                            <Route path={Pages.category.list} element={<List />} />
                            <Route path={`${Pages.category.update}:id`} element={<Update />} />
                            <Route path={`${Pages.category.variant}:id`} element={<Variant />} />
                            <Route path={`${Pages.category.attributes}:id`} element={<Attributes />} />
                            <Route path={Pages.products.create} element={<CreateProduct />} />
                            <Route path={Pages.products.list} element={<ListProduct />} />
                            <Route path={`${Pages.products.update}:id`} element={<UpdateProduct />} />
                            <Route path={`${Pages.products.variants}:id`} element={<ProductVariant />} />
                            <Route path={Pages.products.brands.list} element={<BrandList />} />
                            <Route path={Pages.products.brands.create} element={<BrandCreate />} />
                            <Route path={Pages.products.warranty.list} element={<WarrantyList />} />
                            <Route path={Pages.products.warranty.create} element={<CreateWarranty />} />

                            <Route path={Pages.orders.native} element={<Native />} />
                            <Route path={Pages.orders.sellers} element={<OrdersSeller />} />
                            <Route path={Pages.orders.completed} element={<Native />} />
                            <Route path={Pages.orders.cancelled} element={<Native />} />
                            <Route path={Pages.orders.pending} element={<Native />} />
                            <Route path={`${Pages.orders.detailUser}:id`} element={<OrderDetail />} />
                            <Route path={Pages.orders.cancellationCategories} element={<CancellationCategories />} />
                            <Route path={Pages.orders.returnCategories} element={<ReturnCategories />} />

                            <Route path={Pages.blog.list} element={<BlogsList />} />
                            <Route path={Pages.blog.create} element={<CreateBlog />} />
                            <Route path={`${Pages.blog.detail}:id`} element={<UpdateBlog />} />

                            <Route path={Pages.shipment.list} element={<ShippingList />} />
                            <Route path={Pages.shipment.create} element={<CreateShipment />} />

                            <Route path={Pages.coupon.list} element={<CouponList />} />
                            <Route path={Pages.coupon.create} element={<CreateCoupon />} />
                            <Route path={`${Pages.coupon.detail}:id`} element={<UpdateCoupon />} />

                            <Route path={Pages.buyUsers.list} element={<UsersList />} />

                            <Route path={Pages.admin.list} element={<AdminList />} />
                            <Route path={Pages.admin.create} element={<AdminCreate />} />

                        </Routes>
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    )
}

export default MainRouter