import { ProjectSchema } from "../../../client";
import { Flex, Modal, NumberInput, rem } from "@mantine/core";
import { UseFormReturnType } from "@mantine/form";
import { CardsPageState } from "../hooks/useCardsPageState.tsx";
import ObjectSelect from "../../../components/ObjectSelect/ObjectSelect.tsx";
import CardStatusSelect from "../../../components/DealStatusSelect/CardStatusSelect.tsx";
import BaseMarketplaceSelect from "../../../components/Selects/BaseMarketplaceSelect/BaseMarketplaceSelect.tsx";
import ClientSelectNew from "../../../components/Selects/ClientSelectNew/ClientSelectNew.tsx";
import { useDisclosure } from "@mantine/hooks";
import InlineButton from "../../../components/InlineButton/InlineButton.tsx";
import { IconFilter } from "@tabler/icons-react";
import BoardSelect from "../../../components/BoardSelect/BoardSelect.tsx";

type Props = {
    form: UseFormReturnType<CardsPageState>;
    projects: ProjectSchema[];
};

const CardsTableFiltersModal = ({ form, projects }: Props) => {
    const [opened, { open, close }] = useDisclosure();

    return (
        <>
            <InlineButton onClick={open}>
                <IconFilter />
                Фильтры
            </InlineButton>
            <Modal title={"Фильтры"} opened={opened} onClose={close}>
                <Flex
                    direction={"column"}
                    gap={rem(10)}
                >
                    <NumberInput
                        min={1}
                        placeholder={"Введите номер"}
                        {...form.getInputProps("id")}
                        hideControls
                    />
                    <ObjectSelect
                        placeholder={"Выберите проект"}
                        data={projects}
                        clearable
                        searchable
                        {...form.getInputProps("projectForTable")}
                        onClear={() => form.setFieldValue("projectForTable", null)}
                    />
                    <BoardSelect
                        project={form.values.projectForTable}
                        {...form.getInputProps("board")}
                        clearable
                    />
                    <CardStatusSelect
                        board={form.values.board}
                        {...form.getInputProps("status")}
                        clearable
                    />
                    <BaseMarketplaceSelect
                        onClear={() => form.setFieldValue("marketplace", null)}
                        clearable
                        placeholder={"Выберите маркетплейс"}
                        {...form.getInputProps("marketplace")}
                    />
                    <ClientSelectNew
                        onClear={() =>
                            form.setFieldValue("client", null)
                        }
                        clearable
                        searchable
                        placeholder={"Выберите клиента"}
                        {...form.getInputProps("client")}
                    />
                </Flex>
            </Modal>
        </>
    );
};

export default CardsTableFiltersModal;
