import React, { useMemo } from "react";
import { IconPlus } from "@tabler/icons-react";
import classNames from "classnames";
import { Button, Center, Checkbox, Group, Menu, Stack } from "@mantine/core";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import DealTag from "@/components/ui/DealTag/DealTag";
import useDealTags from "@/components/ui/DealTags/hooks/useDealTags";
import { DealTagSchema } from "@/lib/client";
import styles from "./DealTags.module.css";

type Props = {
    dealId?: number;
    groupId?: number;
    tags: DealTagSchema[];
};

const DealTags = ({ tags, dealId, groupId }: Props) => {
    const { selectedProject } = useProjectsContext();
    const { switchTag } = useDealTags();
    const tagIdsSet = useMemo(() => new Set(tags.map(t => t.id)), [tags]);

    if (selectedProject?.tags.length === 0) return;

    const onTagClick = (tagId: number, event: MouseEvent) => {
        event.preventDefault();
        event.stopPropagation();

        switchTag({ dealId, groupId, tagId });
    };

    const addTagButton = useMemo(
        () => (
            <Menu withArrow>
                <Menu.Target>
                    <Button
                        onClick={e => e.stopPropagation()}
                        unstyled
                        className={classNames(styles["add-tag-button"])}>
                        <Center>
                            <IconPlus
                                size={"1.2em"}
                                className={classNames(
                                    styles["add-tag-button-icon"]
                                )}
                            />
                        </Center>
                    </Button>
                </Menu.Target>
                <Menu.Dropdown>
                    <Stack
                        p={"xs"}
                        gap={"sm"}
                        onClick={e => e.stopPropagation()}>
                        {selectedProject?.tags.map(tag => (
                            <Group
                                key={tag.id}
                                wrap={"nowrap"}>
                                <Checkbox
                                    checked={tagIdsSet.has(tag.id)}
                                    onChange={event =>
                                        onTagClick(
                                            tag.id,
                                            event as unknown as any
                                        )
                                    }
                                    label={tag.name}
                                />
                            </Group>
                        ))}
                    </Stack>
                </Menu.Dropdown>
            </Menu>
        ),
        [selectedProject?.tags, tags]
    );

    return (
        <Group gap={"xs"}>
            {addTagButton}
            {selectedProject?.tags.map(
                tag =>
                    tagIdsSet.has(tag.id) && (
                        <DealTag
                            key={tag.id}
                            tag={tag}
                        />
                    )
            )}
        </Group>
    );
};

export default DealTags;
