import Header from "../shared/Header"
import SideBar from "../shared/SideBar"
import '../assets/fonts/irancell/style.css'
import { Route, Routes, useParams } from 'react-router-dom'
import Home from '../pages/home/Home'
import ReceiptsList from '../pages/receipts/List'
import AddCriticisms from '../pages/criticisms/Add'
import Footer from "../shared/Footer"
import GradeRecordes from "../pages/grade/records"
import Certificate from "../pages/certificate/List"
import AdmitCard from "../pages/admitCard/List"
import MyCourses from "../pages/my-courses/List"
import Payment from "../pages/payment/Details"
import Wallet from "../pages/wallet/Wallet"
import ReceiptsDetail from "../pages/receipts/Detail"
import ReportCardList from "../pages/ReportCard/List"
import TransactionList from "../pages/transaction/List"
import Profile from "../pages/profile/Profile"
import CompanyDetail from "../pages/company/Detail"
import { useEffect } from "react"
import { useGetSlugId } from "../pages/home/hooks/useHomeData"
import { ErrorType } from "../helpers/types"
import { toast } from "react-toastify"
import Request from "../pages/request/Request"
const MainRouter = () => {
    const { slug } = useParams()
    const getSlugId = useGetSlugId()
    useEffect(() => {
        if (slug) {
            const slug_id = localStorage.getItem(import.meta.env.VITE_SLUG_ID)
            const slug_parse = slug_id ? JSON.parse(slug_id) : null
            if (slug_parse && slug_parse.slug === slug) {

                return
            } else {
                getSlugId.mutate(slug, {
                    onSuccess: (data) => {
                        localStorage.setItem(import.meta.env.VITE_SLUG_ID, JSON.stringify(data?.data?.business))
                        window.location.reload()
                    },
                    onError: (error: ErrorType) => {
                        toast.error(error.response?.data?.error.message[0])
                        window.location.href = 'https://danakcorp.com'
                    }
                })
            }
        }
    }, [slug])

    return (
        <div className='p-4 overflow-hidden '>
            <SideBar />
            <Header />
            <div className='flex-1 xl:ms-[269px] mt-[68px] xl:mt-[81px]'>
                <div className={`hide-scroll-bar overflow-auto w-[${window.innerWidth}] max-h-[calc(100vh-113px)]`}>
                    <div className="pb-20">
                        <Routes>
                            <Route path="/" element={<Home />} />
                            <Route path="dashboard" element={<Home />} />
                            <Route path="receipts" element={<ReceiptsList />} />
                            <Route path="receipts/:id" element={<ReceiptsDetail />} />
                            <Route path="company/:id" element={<CompanyDetail />} />
                            <Route path="criticisms" element={<AddCriticisms />} />
                            <Route path="grade/records" element={<GradeRecordes />} />
                            <Route path="transactions" element={<TransactionList />} />
                            <Route path="certificate" element={<Certificate />} />
                            <Route path="admitCard" element={<AdmitCard />} />
                            <Route path="myCourses" element={<MyCourses />} />
                            <Route path="payment" element={<Payment />} />
                            <Route path="wallet" element={<Wallet />} />
                            <Route path="reportCard/list" element={<ReportCardList />} />
                            <Route path="profile" element={<Profile />} />
                            <Route path="request" element={<Request />} />
                        </Routes>
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    )
}

export default MainRouter