"use client";

import { FC } from "react";
import { IconEdit, IconFilter, IconPlus } from "@tabler/icons-react";
import { Flex, Group, Indicator } from "@mantine/core";
import { modals } from "@mantine/modals";
import ViewSelector from "@/app/deals/components/desktop/ViewSelector/ViewSelector";
import { useDealsContext } from "@/app/deals/contexts/DealsContext";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import { DealsFiltersForm } from "@/app/deals/hooks/useDealsFilters";
import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
import { useDrawersContext } from "@/drawers/DrawersContext";
import useIsMobile from "@/hooks/utils/useIsMobile";

export type View = "board" | "table" | "schedule";

type Props = {
    view: View;
    setView: (view: View) => void;
};

const TopToolPanel: FC<Props> = ({ view, setView }) => {
    const { dealsFiltersForm, isChangedFilters } = useDealsContext();
    const { projects, setSelectedProjectId, selectedProject, projectsCrud } =
        useProjectsContext();
    const { openDrawer } = useDrawersContext();
    const isMobile = useIsMobile();

    if (isMobile) return;

    const onCreateClick = () => {
        modals.openContextModal({
            modal: "enterNameModal",
            title: "Создание проекта",
            withCloseButton: true,
            innerProps: {
                onChange: projectsCrud.onCreate,
            },
        });
    };

    const onEditClick = () => {
        if (!selectedProject) return;

        openDrawer({
            key: "projectEditorDrawer",
            props: {
                value: selectedProject,
                onChange: value => projectsCrud.onUpdate(value.id, value),
                onDelete: projectsCrud.onDelete,
            },
        });
    };

    const viewFiltersModalMap = {
        table: "dealsTableFiltersModal",
        board: "dealsBoardFiltersModal",
        schedule: "dealsScheduleFiltersModal",
    };

    const onFiltersClick = () => {
        modals.openContextModal({
            modal: viewFiltersModalMap[view],
            title: "Фильтры",
            withCloseButton: true,
            innerProps: {
                value: dealsFiltersForm.values,
                onChange: (values: DealsFiltersForm) =>
                    dealsFiltersForm.setValues(values),
                project: selectedProject,
                boardAndStatusEnabled: view === "table",
            },
        });
    };

    return (
        <Group justify={"space-between"}>
            <ViewSelector
                value={view}
                onChange={setView}
            />
            <Flex
                wrap={"nowrap"}
                align={"center"}
                gap={"sm"}>
                <Indicator
                    zIndex={100}
                    disabled={!isChangedFilters}
                    offset={3}
                    size={8}>
                    <ActionIconWithTip onClick={onFiltersClick}>
                        <IconFilter />
                    </ActionIconWithTip>
                </Indicator>
                <ActionIconWithTip onClick={onEditClick}>
                    <IconEdit />
                </ActionIconWithTip>
                <ActionIconWithTip onClick={onCreateClick}>
                    <IconPlus />
                </ActionIconWithTip>
                <ProjectSelect
                    data={projects}
                    value={selectedProject}
                    onChange={value => value && setSelectedProjectId(value.id)}
                    style={{ width: 250 }}
                />
            </Flex>
        </Group>
    );
};

export default TopToolPanel;
