import { FC } from "react";
import PageBlock from "../../../components/PageBlock/PageBlock.tsx";
import styles from "./DealsPage.module.css";
import DealStatusSelect from "../components/DealStatusSelect/DealStatusSelect.tsx";
import DealsTable from "../components/DealsTable/DealsTable.tsx";
import BaseMarketplaceSelect from "../../../components/Selects/BaseMarketplaceSelect/BaseMarketplaceSelect.tsx";
import ClientSelectNew from "../../../components/Selects/ClientSelectNew/ClientSelectNew.tsx";
import { DealPageContextProvider } from "../../LeadsPage/contexts/DealPageContext.tsx";
import DealEditDrawer from "../../LeadsPage/drawers/DealEditDrawer/DealEditDrawer.tsx";
import useDealsPageState from "../hooks/useDealsPageState.tsx";

export const DealsPage: FC = () => {
    const { data, form } = useDealsPageState();
    return (
        <>
            <DealPageContextProvider refetchDeals={async () => {

            }}>
                <div className={styles["container"]}>
                    <PageBlock>
                        <div className={styles["top-panel"]}>
                            <DealStatusSelect
                                onClear={() =>
                                    form.setFieldValue("dealStatus", null)
                                }
                                clearable
                                placeholder={"Выберите статус "}
                                {...form.getInputProps("dealStatus")}
                            />
                            <BaseMarketplaceSelect
                                onClear={() =>
                                    form.setFieldValue("marketplace", null)
                                }
                                clearable
                                placeholder={"Выберите маркетплейс"}
                                {...form.getInputProps("marketplace")}
                            />
                            <ClientSelectNew
                                onClear={() =>
                                    form.setFieldValue("client", null)
                                }
                                clearable
                                searchable
                                placeholder={"Выберите клиента"}
                                {...form.getInputProps("client")}
                            />
                        </div>
                    </PageBlock>
                    <PageBlock>
                        <div className={styles["body-container"]}>
                            <div className={styles["table-container"]}>
                                <DealsTable items={data} />
                            </div>
                        </div>
                    </PageBlock>
                </div>
                <DealEditDrawer />
            </DealPageContextProvider>
        </>
    );
};