import {Button, rem, Textarea, TextInput} from "@mantine/core";
import {QuickDeal} from "../../../types/QuickDeal.ts";
import {FC} from "react";
import {useForm} from "@mantine/form";
import styles from './CreateDealForm.module.css';
import ClientAutocomplete from "../../Selects/ClientAutocomplete/ClientAutocomplete.tsx";
import {DateTimePicker} from "@mantine/dates";
import ShippingWarehouseAutocomplete
    from "../../Selects/ShippingWarehouseAutocomplete/ShippingWarehouseAutocomplete.tsx";
import BaseMarketplaceSelect from "../../Selects/BaseMarketplaceSelect/BaseMarketplaceSelect.tsx";

type Props = {
    onSubmit: (quickDeal: QuickDeal) => void
    onCancel: () => void;
}
const CreateDealFrom: FC<Props> = ({onSubmit, onCancel}) => {
    const form = useForm<QuickDeal>({
        initialValues: {
            name: '',
            clientName: '',
            clientAddress: '',
            comment: '',
            acceptanceDate: new Date(),
            shippingWarehouse: '',
            baseMarketplace: {
                key: "",
                iconUrl: "",
                name: ""
            }
        }
    });
    return (
        <form
            style={{width: '100%'}}
            onSubmit={form.onSubmit((values) => onSubmit(values))}
        >
            <div style={{
                display: 'flex',
                flexDirection: 'column',
                width: '100%',
                gap: rem(10),
                padding: rem(10)
            }}>
                <div className={styles['inputs']}>
                    <TextInput
                        placeholder={'Название сделки'}
                        {...form.getInputProps('name')}
                    />
                </div>
                <div className={styles['inputs']}>
                    <ClientAutocomplete
                        nameRestProps={form.getInputProps('clientName')}
                    />
                </div>
                <div className={styles['inputs']}>
                    <BaseMarketplaceSelect
                        rightSection={<></>}
                        placeholder={"Базовый маркетплейс"}
                        {...form.getInputProps("baseMarketplace")}
                    />
                    <ShippingWarehouseAutocomplete
                        {...form.getInputProps('shippingWarehouse')}
                        placeholder={'Склад отгрузки'}
                    />
                </div>

                <div className={styles['inputs']}>
                    <Textarea
                        autosize
                        placeholder={'Комментарий'}
                        minRows={2}
                        maxRows={4}
                        {...form.getInputProps('comment')}
                    />
                </div>
                <div className={styles['inputs']}>
                    <DateTimePicker
                        placeholder={'Дата приемки'}
                        {...form.getInputProps('acceptanceDate')}
                    />
                </div>


                <div className={styles['buttons']}>
                    <Button
                        type={'submit'}
                    >Добавить</Button>
                    <Button
                        variant={'outline'}
                        onClick={() => onCancel()}
                    >Отменить</Button>
                </div>
            </div>
        </form>

    )
}

export default CreateDealFrom;