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 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 AddCriticisms from '../pages/criticisms/Add'
import LearningList from '../pages/learning/List'
import Setting from '../pages/setting/Setting'
import Wallet from '../pages/wallet/Wallet'
import ReceiptsDetail from '../pages/receipts/Detail'
import Profile from '../pages/profile/Profile'
import OtherServices from '../pages/service/OtherServices'
import Footer from '../shared/Footer'
import AnnouncementDetail from '../pages/annoncement/Detail'
import DetailService from '../pages/service/DetailService'
import TicketList from '../pages/ticket/TicketList'
import CreateTicket from '../pages/ticket/CreateTicket'
import TicketDetail from '../pages/ticket/Detail'
import Financial from '../pages/financial/Financial'
import CallBack from '../pages/payment/CallBack'
import MyDiscountList from '../pages/discounts/List'
import LearningDetail from '../pages/learning/Detail'
import BuyService from '../pages/service/BuyService'
import Support from '../pages/support/Support'
import SupportInfo from '../pages/support/SupportInfo'
import Invoice from '../pages/receipts/Invoice'

const MainRouter: FC = () => {
    return (
        <div className='p-4 overflow-hidden'>
            <SideBar />
            <Header />
            <div className='flex-1 xl:ms-[269px] mt-[68px] xl:mt-[81px]'>
                <div className={`overflow-auto w-[${window.innerWidth}] max-h-[calc(100vh-113px)]`}>
                    <div className='xl:pb-20 pb-32'>
                        <Routes>
                            <Route path={Pages.dashboard} element={<Home />} />
                            <Route path={Pages.support.index} element={<Support />} />
                            <Route path={Pages.support.info} element={<SupportInfo />} />
                            <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.buy + ':serviceId/:planId'} element={<BuyService />} />
                            <Route path={Pages.ticket.list} element={<TicketList />} />
                            <Route path={Pages.ticket.create} element={<CreateTicket />} />
                            <Route path={Pages.ticket.detail + ':id'} element={<TicketDetail />} />
                            <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.factor + ':id'} element={<Invoice />} />
                            <Route path={Pages.announcement.list} element={<AnnouncementtList />} />
                            <Route path={Pages.announcement.detail + ':id'} element={<AnnouncementDetail />} />
                            <Route path={Pages.criticisms} element={<AddCriticisms />} />
                            <Route path={Pages.learning.list} element={<LearningList />} />
                            <Route path={Pages.learning.detail + ':id'} element={<LearningDetail />} />
                            <Route path={Pages.setting} element={<Setting />} />
                            <Route path={Pages.wallet} element={<Wallet />} />
                            <Route path={Pages.callback} element={<CallBack />} />
                            <Route path={Pages.profile} element={<Profile />} />
                            <Route path={Pages.financial} element={<Financial />} />
                            <Route path={Pages.discounts} element={<MyDiscountList />} />
                        </Routes>
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    )
}

export default MainRouter