import {Button, Divider, Flex, Tabs} from "@mantine/core";
import {iconMStyle, maxWidth} from "../styles.ts";
import React from "react";
import {DashboardPageType, UserPermissionLevel} from "~/utils/hms_enums.ts";
import HomeIcon from "mdi-react/HomeIcon";
import InformationIcon from "mdi-react/InformationIcon";
import LogoutIcon from "mdi-react/LogoutIcon";
import AccountGroupIcon from "mdi-react/AccountGroupIcon";
import BedIcon from "mdi-react/BedIcon";
import AccountWrenchIcon from "mdi-react/AccountWrenchIcon";
import BookAccountIcon from "mdi-react/BookAccountIcon";
import HospitalBoxIcon from "mdi-react/HospitalBoxIcon";


export function PageNavbar({currentStat, changePageStat, userPermission, canReception}:
                               {currentStat: DashboardPageType, changePageStat: (p: DashboardPageType) => any,
                               userPermission: UserPermissionLevel, canReception: boolean}) {

    const onClickLogout = () => {
        localStorage.removeItem("hms_token")
        changePageStat(DashboardPageType.LoginPage)
    }

    return (
        <>
            <Tabs variant="pills" orientation="vertical" defaultValue="gallery" value={currentStat} style={{flex: 1}}
                  onChange={(e) => {if (e) changePageStat(e as DashboardPageType)}}>
                <Tabs.List style={maxWidth}>
                    <Tabs.Tab value={DashboardPageType.Home} leftSection={<HomeIcon style={iconMStyle}/>}>
                        Home
                    </Tabs.Tab>

                    { userPermission == UserPermissionLevel.PATIENT && <>
                        <Divider my="0px" label="Patient" labelPosition="center" />
                        <Tabs.Tab value={DashboardPageType.PatientBooking} leftSection={<BookAccountIcon style={iconMStyle}/>}>
                            My Appointments
                        </Tabs.Tab>
                        <Tabs.Tab value={DashboardPageType.TreatmentRecord} leftSection={<BookAccountIcon style={iconMStyle}/>}>
                            My Treatments
                        </Tabs.Tab>
                    </>}

                    { canReception && <>
                        <Divider my="0px" label="Reception" labelPosition="center" />
                        <Tabs.Tab value={DashboardPageType.AppointManagement} leftSection={<BookAccountIcon style={iconMStyle}/>}>
                            Appointments Management
                        </Tabs.Tab>
                    </>}

                    { userPermission >= UserPermissionLevel.DOCTOR && <>
                        <Divider my="0px" label="Doctor" labelPosition="center" />
                        <Tabs.Tab value={DashboardPageType.DoctorTreatment} leftSection={<HospitalBoxIcon style={iconMStyle}/>}>
                            Patient Treatment
                        </Tabs.Tab>
                    </>}

                    { userPermission >= UserPermissionLevel.ADMIN && <>
                        <Divider my="0px" label="Ward Management" labelPosition="center" />
                        <Tabs.Tab value={DashboardPageType.WardsManagement} leftSection={<BedIcon style={iconMStyle}/>}>
                            Ward Management
                        </Tabs.Tab>

                        <Divider my="0px" label="User Management" labelPosition="center" />
                        <Tabs.Tab value={DashboardPageType.MedicalTeamsManagement} leftSection={<AccountGroupIcon style={iconMStyle}/>}>
                            Medical Teams Management
                        </Tabs.Tab>
                        <Tabs.Tab value={DashboardPageType.StaffManagement} leftSection={<AccountWrenchIcon style={iconMStyle}/>}>
                            Staff Management
                        </Tabs.Tab>
                        <Tabs.Tab value={DashboardPageType.PatientsManagement} leftSection={<AccountWrenchIcon style={iconMStyle}/>}>
                            Patients Management
                        </Tabs.Tab>
                    </> }

                    { userPermission >= UserPermissionLevel.DOCTOR && <>
                        <Divider my="0px" label="Records" labelPosition="center" />
                        <Tabs.Tab value={DashboardPageType.TreatmentRecord} leftSection={<BookAccountIcon style={iconMStyle}/>}>
                            Treatment Records
                        </Tabs.Tab>
                    </>}

                </Tabs.List>
            </Tabs>
            <Flex gap="md" justify="flex-start" align="flex-end" direction="row" wrap="wrap" style={maxWidth}>

                <Button variant="outline" color="blue" fullWidth justify="start" onClick={() => changePageStat(DashboardPageType.About)}
                        leftSection={<InformationIcon style={iconMStyle}/>}>
                    About
                </Button>
                <Button variant="outline" color="red" fullWidth justify="start" onClick={onClickLogout}
                        leftSection={<LogoutIcon style={iconMStyle}/>}>
                    Logout
                </Button>
            </Flex>

        </>
    )
}