"use client";

import { IconChevronLeft, IconSettings } from "@tabler/icons-react";
import { Box, Group, Stack, Text } from "@mantine/core";
import Boards from "@/app/deals/components/shared/Boards/Boards";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
import { ColorSchemeToggle } from "@/components/ui/ColorSchemeToggle/ColorSchemeToggle";
import useIsMobile from "@/hooks/useIsMobile";

const Header = () => {
    const {
        projects,
        setSelectedProject,
        selectedProject,
        setIsEditorDrawerOpened: setIsProjectsDrawerOpened,
    } = useProjectsContext();
    const { setIsEditorDrawerOpened } = useBoardsContext();
    const isMobile = useIsMobile();

    const getDesktopHeader = () => {
        return (
            <Group
                w={"100%"}
                justify={"end"}
                wrap={"nowrap"}
                pr={"md"}>
                <Group wrap={"nowrap"}>
                    <ColorSchemeToggle />
                    <ProjectSelect
                        data={projects}
                        value={selectedProject}
                        onChange={value => value && setSelectedProject(value)}
                    />
                </Group>
            </Group>
        );
    };

    const getMobileHeader = () => {
        return (
            <Group justify={"space-between"}>
                <Box
                    p={"md"}
                    onClick={() => setIsProjectsDrawerOpened(true)}>
                    <IconChevronLeft />
                </Box>
                <Text>{selectedProject?.name}</Text>
                <Box
                    p={"md"}
                    onClick={() => setIsEditorDrawerOpened(true)}>
                    <IconSettings />
                </Box>
            </Group>
        );
    };

    return (
        <Group
            justify={"flex-end"}
            w={"100%"}>
            <Stack
                gap={0}
                w={"100%"}>
                {isMobile ? getMobileHeader() : getDesktopHeader()}
                <Boards />
            </Stack>
        </Group>
    );
};

export default Header;
