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>
                <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>
        </>
    )
}