"use client";

import { FC } from "react";
import { IconFilter } from "@tabler/icons-react";
import { Button, Divider, Flex, Group, Indicator } from "@mantine/core";
import { modals } from "@mantine/modals";
import style from "@/app/deals/components/desktop/ViewSelectButton/ViewSelectButton.module.css";
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 SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock";
import useIsMobile from "@/hooks/utils/useIsMobile";

export enum View {
    BOARD = "board",
    TABLE = "table",
    SCHEDULE = "schedule"
}

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

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

    if (isMobile) return;

    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 === View.TABLE,
            },
        });
    };

    return (
        <Group>
            <ViewSelector
                value={view}
                onChange={setView}
            />
            <Divider orientation={"vertical"} />
            <Flex
                wrap={"nowrap"}
                align={"center"}
                gap={"sm"}>
                <Indicator
                    zIndex={100}
                    disabled={!isChangedFilters}
                    offset={5}
                    size={8}>
                    <SmallPageBlock
                        style={{ borderRadius: "var(--mantine-radius-xl)" }}>
                        <Button
                            unstyled
                            onClick={onFiltersClick}
                            radius="xl"
                            className={style.container}>
                            <IconFilter />
                        </Button>
                    </SmallPageBlock>
                </Indicator>
            </Flex>
        </Group>
    );
};

export default TopToolPanel;
