import type {Route} from "../../.react-router/types/app/pages/+types/Dashboard";
import {useDisclosure, useWindowScroll} from "@mantine/hooks";
import {Affix, AppShell, Button, Space, Stack, Transition} from "@mantine/core";
import {PageHeader} from "~/components/PageHeader.tsx";
import {PageNavbar} from "~/components/PageNavbar.tsx";
import {useEffect, useState} from "react";
import {DashboardPageType, Departments, UserPermissionLevel} from "~/utils/hms_enums.ts";
import {Outlet, useLocation, useNavigate} from "react-router";
import type {LoginUserInfo} from "~/utils/models.ts";
import {apiGetMyInfo} from "~/utils/hms_api.ts";
import {getEnumKeyByValue, getUserDisplayFullName} from "~/utils/utils.ts";
import ArrowUpIcon from "mdi-react/ArrowUpIcon";
import HomeIcon from "mdi-react/HomeIcon";
import GlobalAffix from "~/components/GlobalAffix.tsx";

export function meta({}: Route.MetaArgs) {
    return [
        { title: "Dashboard" },
        { name: "description", content: "Dashboard Main" },
    ];
}

export default function Component() {
    const navigate = useNavigate();
    const [currentStat, setCurrentStat] = useState(DashboardPageType.Home)
    const [loginUserInfo, setLoginUserInfo] = useState<LoginUserInfo | null>(null)
    const [canReception, setCanReception] = useState<boolean>(false)
    const [opened, { toggle }] = useDisclosure()
    const location = useLocation();

    const changePage = (pageType: DashboardPageType, navigateTo?: string) => {
        // if (currentStat == pageType) return
        setCurrentStat(pageType)
        navigate(navigateTo || pageType)
    }

    const refreshCanReception = (data: LoginUserInfo) => {
        if (!data.doctor_teams) {
            setCanReception(false)
            return
        }

        for (const team of data.doctor_teams) {
            if ((team.department == Departments.Reception) || team.is_admin_team) {
                setCanReception(true)
                return
            }
        }
    }

    const refreshMyInfo = () => {
        apiGetMyInfo()
            .then((res => {
                if (res.success && res.data) {
                    setLoginUserInfo(res.data)
                    refreshCanReception(res.data)
                }
                else {
                    navigate(DashboardPageType.LoginPage)
                }
            }))
            .catch(err => {
                console.log("apiGetMyInfo failed", err)
                navigate(DashboardPageType.LoginPage)
            })
    }

    useEffect(() => {
        refreshMyInfo()
        let currPage = getEnumKeyByValue(DashboardPageType, location.pathname)
        if (currPage) {
            setCurrentStat(DashboardPageType[currPage])
        }
        else {
            const pathParts = location.pathname.split("/")
            const path = pathParts.slice(0, pathParts.length - 1).join("/")
            currPage = getEnumKeyByValue(DashboardPageType, path + "/")
            if (currPage) {
                setCurrentStat(DashboardPageType[currPage])
            }
        }
    }, []);

    return (
        <AppShell header={{ height: 60 }} navbar={{width: 300, breakpoint: `sm`, collapsed: {mobile: !opened}}} padding="md">
            <AppShell.Header p="md">
                <PageHeader opened={opened} toggle={toggle} appendTitle={getUserDisplayFullName(loginUserInfo)}/>
            </AppShell.Header>

            <AppShell.Navbar p="md">
                <PageNavbar currentStat={currentStat} changePageStat={changePage}
                            userPermission={loginUserInfo ? loginUserInfo.user_permission : UserPermissionLevel.UNAUTHORIZED}
                            canReception={canReception} />
            </AppShell.Navbar>

            <AppShell.Main>
                <Outlet context={{ loginUserInfo, refreshMyInfo, changePage }} />
                <Space h={50} />
                <GlobalAffix />
            </AppShell.Main>
        </AppShell>
    );
}