import {Button, Divider, Flex, Tabs} from "@mantine/core";
import {iconMStyle, maxWidth} from "../styles.ts";
import React from "react";
import {DashboardPageType} from "~/utils/enums.ts";
import HomeIcon from "mdi-react/HomeIcon";
import InformationIcon from "mdi-react/InformationIcon";
import LogoutIcon from "mdi-react/LogoutIcon";
import DownloadIcon from "mdi-react/DownloadIcon";
import UploadIcon from "mdi-react/UploadIcon";


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

    const onClickLogout = () => {
        localStorage.removeItem("password")
        changePageStat(DashboardPageType.Home)
    }

    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.Dashboard} leftSection={<HomeIcon style={iconMStyle}/>}>
                        Home
                    </Tabs.Tab>

                    <Divider my="0px" label="Performance Test" labelPosition="center" />

                    <Tabs.Tab value={DashboardPageType.DashboardTestGetList} leftSection={<DownloadIcon style={iconMStyle}/>}>
                        Fetch Data
                    </Tabs.Tab>

                    <Tabs.Tab value={DashboardPageType.DashboardTestPushData} leftSection={<UploadIcon style={iconMStyle}/>}>
                        Push Data
                    </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>

        </>
    )
}