import {Center, Flex, Image, rem, Stack, Tooltip, UnstyledButton, useMantineColorScheme} from '@mantine/core';
import {
    IconBarcode,
    IconBox,
    IconCash, IconDashboard,
    IconFileBarcode,
    IconHome2,
    IconLogout,
    IconMan,
    IconMoon,
    IconSun,
} from '@tabler/icons-react';
import classes from './Navbar.module.css';
import {useAppDispatch} from "../../redux/store.ts";
import {logout} from "../../features/authSlice.ts";
import {useNavigate, useRouterState} from "@tanstack/react-router";

interface NavbarLinkProps {
    icon: typeof IconHome2;
    label?: string;
    active?: boolean;
    href: string;

    onClick?(navlink: NavbarLinkProps): void;

    index: number;
}

function NavbarLink(props: NavbarLinkProps) {
    const {icon: Icon, label, active, onClick} = props;
    return (
        <Tooltip display={!label ? "none" : "flex"} label={label} position="right" transitionProps={{duration: 0}}>
            <UnstyledButton onClick={() => onClick && onClick(props)}
                            className={classes.link}
                            data-active={active || undefined}>
                <Icon style={{width: rem(20), height: rem(20)}} stroke={1.5}/>
            </UnstyledButton>
        </Tooltip>
    );
}

const mockdata = [
    // {
    //     icon: IconHome2,
    //     label: 'Главная',
    //     href: '/'
    // },
    {
        icon: IconCash,
        label: 'Сделки',
        href: '/leads'
    },
    {
        icon: IconMan,
        label: 'Клиенты',
        href: '/clients'
    },
    {
        icon: IconBox,
        label: 'Услуги',
        href: '/services'
    },
    {
        icon: IconBarcode,
        label: 'Товары',
        href: '/products'
    },
    {
        icon: IconFileBarcode,
        label: 'Штрихкоды',
        href: '/barcode'
    }
];

export function Navbar() {
    const dispatch = useAppDispatch();
    const navigate = useNavigate();
    const router = useRouterState();
    const {colorScheme, toggleColorScheme} = useMantineColorScheme({keepTransitions: true});
    const onLogoutClick = () => {
        dispatch(logout());
        navigate({to: '/login'});
    }
    const onNavlinkClick = (props: NavbarLinkProps) => {
        navigate({to: props.href});
    }
    const links = mockdata.map((link, index) => (
        <NavbarLink
            {...link}
            index={index}
            key={link.label}
            active={router.location.pathname === link.href}
            onClick={onNavlinkClick}
        />
    ));

    return (
        <nav className={classes.navbar}>
            <Flex direction={"column"} gap={rem(30)}>
                <Center
                    p={rem(5)}
                >
                    <Image
                        // style={{filter: "drop-shadow(0 0 30px #fff)"}}
                        src={colorScheme == "dark" ? "/icons/logo-light.png" : "/icons/logo.png"}
                    />
                </Center>

                <div className={classes.navbarMain}>
                    <Stack justify="center" gap={rem(10)}>
                        {links}
                    </Stack>
                </div>
            </Flex>

            <Stack w={"100%"} justify="center" gap={0}>
                <NavbarLink icon={IconDashboard}
                            href={"/admin"}
                            index={-1}
                            label={"Панель администратора"}
                            onClick={() => onNavlinkClick({href: "/admin", index: -1, icon: IconDashboard})}
                />
                <NavbarLink label={"Сменить тему"} onClick={toggleColorScheme}
                            icon={colorScheme == "dark" ? IconSun : IconMoon} href={"#"} index={-1}/>
                <NavbarLink index={-1} href={"#"} onClick={onLogoutClick} icon={IconLogout} label="Выйти"/>
            </Stack>
        </nav>
    );
}