"use client";

import { IconChevronLeft, IconSettings } from "@tabler/icons-react";
import { Box, Flex, 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 { useDrawersContext } from "@/drawers/DrawersContext";
import useIsMobile from "@/hooks/useIsMobile";

const Header = () => {
    const { projects, setSelectedProjectId, refetchProjects, selectedProject } =
        useProjectsContext();
    const { refetchBoards } = useBoardsContext();
    const { openDrawer } = useDrawersContext();
    const isMobile = useIsMobile();

    const getDesktopHeader = () => {
        return (
            <Flex
                wrap={"nowrap"}
                justify={"space-between"}>
                <Boards />
                <Box
                    flex={1}
                    style={{ borderBottom: "2px solid gray" }}
                />
                <Flex
                    align={"center"}
                    style={{
                        borderBottom: "2px solid gray",
                    }}>
                    <ProjectSelect
                        data={projects}
                        value={selectedProject}
                        onChange={value =>
                            value && setSelectedProjectId(value.id)
                        }
                        style={{ minWidth: 200 }}
                    />
                </Flex>
            </Flex>
        );
    };

    const selectProjectId = async (projectId: number | null) => {
        await refetchProjects();
        setSelectedProjectId(projectId);
    };

    const openProjectsEditorDrawer = () => {
        openDrawer({
            key: "projectsEditorDrawer",
            props: {
                setSelectedProjectId: selectProjectId,
            },
        });
    };

    const openBoardsEditorDrawer = () => {
        if (!selectedProject) return;
        openDrawer({
            key: "projectBoardsEditorDrawer",
            props: {
                project: selectedProject,
            },
            onClose: refetchBoards,
        });
    };

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

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

export default Header;