"use client";

import { IconChevronLeft, IconSettings } from "@tabler/icons-react";
import { Box, Group, Stack, Text } from "@mantine/core";
import Boards from "@/app/deals/components/desktop/Boards/Boards";
import BoardsMobile from "@/app/deals/components/mobile/BoardsMobile/BoardsMobile";
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={"space-between"}
                wrap={"nowrap"}
                pr={"md"}>
                <Boards />
                <ColorSchemeToggle />
                <ProjectSelect
                    data={projects}
                    value={selectedProject}
                    onChange={value => value && setSelectedProject(value)}
                />
            </Group>
        );
    };

    const getMobileHeader = () => {
        return (
            <Stack gap={0}>
                <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>
                <BoardsMobile />
            </Stack>
        );
    };

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

export default Header;