import { FC } from 'react'
import SideBar from '../shared/SideBar'
import Header from '../shared/Header'
import { Route, Routes } from 'react-router-dom'
import { Pages } from '../config/Pages'
import Home from '../pages/home/Home'
import MyServices from '../pages/service/MyServices'
import BlogList from '../pages/blog/BlogList'
import CreateBlog from '../pages/blog/CreateBlog'
import BlogCategory from '../pages/blog/BlogCategory'
import TicketList from '../pages/ticket/TicketList'
import CreateTicket from '../pages/ticket/CreateTicket'
import TicketDetail from '../pages/ticket/Detail'
import TransactionList from '../pages/transaction/List'
import ReceiptsList from '../pages/receipts/List'
import AnnouncementtList from '../pages/annoncement/List'
import Setting from '../pages/setting/Setting'
import ReceiptsDetail from '../pages/receipts/Detail'
import Profile from '../pages/profile/Profile'
import OtherServices from '../pages/service/OtherServices'
import Footer from '../shared/Footer'
import DetailService from '../pages/service/DetailService'
import { clx } from '../helpers/utils'
import { useSharedStore } from '../shared/store/sharedStore'
import CreateReceipt from '../pages/receipts/Create'
import AddService from '../pages/service/AddService'
import ListService from '../pages/service/List'
import Category from '../pages/service/Category'
import TicketCategory from '../pages/ticket/Category'
import MessagesList from '../pages/messages/List'
import CriticismsList from '../pages/criticisms/List'
import CriticismsDetail from '../pages/criticisms/Detail'
import Create from '../pages/annoncement/Create'
import UsersList from '../pages/users/List'
import CreateUser from '../pages/users/Create'
import RolesList from '../pages/users/RolesList'
import RoleCreate from '../pages/users/RoleCreate'
import MessageDetail from '../pages/messages/Detail'
import PaymentList from '../pages/payment/List'
import Plans from '../pages/service/Plans'
import GroupCreate from '../pages/users/GroupCreate'
import GroupList from '../pages/users/GroupList'
import Reviews from '../pages/service/Reviews'
import UpdateService from '../pages/service/UpdateService'
import UpdateBlog from '../pages/blog/Update'
import Update from '../pages/annoncement/Update'
import UpdateUser from '../pages/users/Update'
import Comments from '../pages/blog/Comments'
import CreateCompany from '../pages/company/Create'
import Industries from '../pages/company/components/Industries'
import CompanyList from '../pages/company/List'
import UpdateCompany from '../pages/company/Update'
const MainRouter: FC = () => {

    const { hasSubMenu } = useSharedStore()

    return (
        <div className='p-4 overflow-hidden h-screen'>
            <SideBar />
            <Header />
            <div className={clx(
                'flex-1 xl:ms-[269px] mt-[68px] xl:mt-[81px]',
                hasSubMenu && 'xl:ms-[305px]',
            )}>
                <div className={clx(
                    `overflow-auto h-[calc(100vh-113px)] main-content-scroll`,
                )}>
                    <div>
                        <Routes>
                            <Route path={Pages.dashboard} element={<Home />} />
                            <Route path={Pages.services.mine} element={<MyServices />} />
                            <Route path={Pages.services.other} element={<OtherServices />} />
                            <Route path={Pages.services.detail + ':id'} element={<DetailService />} />
                            <Route path={Pages.services.add} element={<AddService />} />
                            <Route path={Pages.services.list} element={<ListService />} />
                            <Route path={Pages.services.update + ':id'} element={<UpdateService />} />
                            <Route path={Pages.services.category} element={<Category />} />
                            <Route path={Pages.services.plan + ':id'} element={<Plans />} />
                            <Route path={Pages.services.review} element={<Reviews />} />
                            <Route path={Pages.ticket.list} element={<TicketList />} />
                            <Route path={Pages.ticket.create} element={<CreateTicket />} />
                            <Route path={Pages.ticket.category} element={<TicketCategory />} />
                            <Route path={Pages.ticket.detail + ':id'} element={<TicketDetail />} />
                            <Route path={Pages.blog.list} element={<BlogList />} />
                            <Route path={Pages.blog.list} element={<BlogList />} />
                            <Route path={Pages.blog.create} element={<CreateBlog />} />
                            <Route path={Pages.blog.category} element={<BlogCategory />} />
                            <Route path={Pages.blog.detail + ':id'} element={<UpdateBlog />} />
                            <Route path={Pages.transactions} element={<TransactionList />} />
                            <Route path={Pages.receipts.index} element={<ReceiptsList />} />
                            <Route path={Pages.receipts.detail + ':id'} element={<ReceiptsDetail />} />
                            <Route path={Pages.receipts.create} element={<CreateReceipt />} />
                            <Route path={Pages.announcement.list} element={<AnnouncementtList />} />
                            <Route path={Pages.announcement.detail + ':id'} element={<Update />} />
                            <Route path={Pages.announcement.create} element={<Create />} />
                            <Route path={Pages.criticisms.list} element={<CriticismsList />} />
                            <Route path={Pages.criticisms.detail + ':id'} element={<CriticismsDetail />} />
                            <Route path={Pages.setting} element={<Setting />} />
                            <Route path={Pages.profile} element={<Profile />} />
                            <Route path={Pages.messages.list} element={<MessagesList />} />
                            <Route path={Pages.messages.detail + ':id'} element={<MessageDetail />} />
                            <Route path={Pages.users.list} element={<UsersList />} />
                            <Route path={Pages.users.create} element={<CreateUser />} />
                            <Route path={Pages.users.detail + ':id'} element={<UpdateUser />} />
                            <Route path={Pages.users.roleList} element={<RolesList />} />
                            <Route path={Pages.users.roleCreate} element={<RoleCreate />} />
                            <Route path={Pages.users.groupAdd} element={<GroupCreate />} />
                            <Route path={Pages.users.groupList} element={<GroupList />} />
                            <Route path={Pages.payment.list} element={<PaymentList />} />
                            <Route path={Pages.blog.comments} element={<Comments />} />
                            <Route path={Pages.company.create} element={<CreateCompany />} />
                            <Route path={Pages.company.industries} element={<Industries />} />
                            <Route path={Pages.company.list} element={<CompanyList />} />
                            <Route path={Pages.company.detail + ':id'} element={<UpdateCompany />} />
                        </Routes>
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    )
}

export default MainRouter