"use client";

import { IconEdit, IconPlus } from "@tabler/icons-react";
import { Box, Group, HoverCard } from "@mantine/core";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import useProjectActions from "@/components/layout/Navbar/hooks/useProjectActions";
import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";

const ProjectSelectContainer = () => {
    const { projects, selectedProject, setSelectedProjectId } =
        useProjectsContext();
    const { onCreateClick, onChangeClick } = useProjectActions();

    return (
        <HoverCard
            zIndex={150}
            position={"right"}>
            <HoverCard.Target>
                <ProjectSelect
                    data={projects}
                    value={selectedProject}
                    onChange={value => value && setSelectedProjectId(value.id)}
                    styles={{
                        input: {
                            textAlign: "center",
                        },
                    }}
                    rightSection={<Box />}
                    rightSectionWidth={"var(--mantine-spacing-md)"}
                />
            </HoverCard.Target>
            <HoverCard.Dropdown
                p={"xs"}
                bdrs={"xl"}>
                <Group gap={"xs"}>
                    <ActionIconWithTip onClick={onChangeClick}>
                        <IconEdit />
                    </ActionIconWithTip>
                    <ActionIconWithTip onClick={onCreateClick}>
                        <IconPlus />
                    </ActionIconWithTip>
                </Group>
            </HoverCard.Dropdown>
        </HoverCard>
    );
};

export default ProjectSelectContainer;
