import { Button, Group, Modal } from "@mantine/core";
import { IconFilter } from "@tabler/icons-react";
import { Filters } from "../components/Filters/Filters.tsx";
import { FormFilters } from "../../../types/FormFilters.ts";
import { UseFormReturnType } from "@mantine/form";
import { useDisclosure } from "@mantine/hooks";


type Props = {
    form: UseFormReturnType<FormFilters>;
}

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

    return (
        <>
            <Button
                variant={"default"}
                onClick={open}
                mb={"lg"}
            >
                <Group gap={"xs"}>
                    <IconFilter />
                    Фильтры
                </Group>
            </Button>
            <Modal
                opened={opened}
                onClose={close}
                title={"Фильтры"}
            >
                <Filters
                    datePickerProps={form.getInputProps("dateRange")}
                    groupTableByProps={{
                        value: form.values.groupTableBy.toString(),
                        onChange: (value: string) => form.setFieldValue("groupTableBy", parseInt(value)),
                    }}
                    clientSelectProps={form.getInputProps("client")}
                    onClientClear={() => form.setFieldValue("client", null)}
                    baseMarketplaceSelectProps={form.getInputProps("marketplace")}
                    onBaseMarketplaceClear={() => form.setFieldValue("marketplace", null)}
                    dealStatusSelectProps={form.getInputProps("dealStatus")}
                    onDealStatusClear={() => form.setFieldValue("dealStatus", null)}
                    managerSelectProps={form.getInputProps("manager")}
                    onManagerClear={() => form.setFieldValue("manager", null)}
                    expenseTagSelectProps={form.getInputProps("expenseTag")}
                    onExpenseTagClear={() => form.setFieldValue("expenseTag", null)}
                    incomeTagSelectProps={form.getInputProps("incomeTag")}
                    onIncomeTagClear={() => form.setFieldValue("incomeTag", null)}
                />
            </Modal>
        </>
    );
};