import {ContextModalProps} from "@mantine/modals";
import {Fieldset, NumberInput, TextInput} from "@mantine/core";
import {useForm} from "@mantine/form";
import {ClientSchema} from "../../../../client";
import {getDigitsCount} from "../../../../shared/lib/utils.ts";
import BaseFormModal, {CreateEditFormProps} from "../BaseFormModal/BaseFormModal.tsx";


type Props = CreateEditFormProps<ClientSchema>;

const ClientFormModal = ({
                             context,
                             id,
                             innerProps,
                         }: ContextModalProps<Props>) => {
    const isEditing = 'onChange' in innerProps;

    const initialValues: ClientSchema = isEditing ? {
        id: innerProps.element.id,
        name: innerProps.element.name,
        details: {
            address: innerProps.element.details?.address,
            phoneNumber: innerProps.element.details?.phoneNumber,
            email: innerProps.element.details?.email,
            inn: innerProps.element.details?.inn
        }
    } : {
        id: -1,
        name: '',
        details: {
            address: '',
            phoneNumber: '',
            email: '',
            inn: undefined
        }
    }
    const form = useForm<ClientSchema>({
        initialValues: initialValues,
        validate: {
            name: (name: string) => name.trim() !== '' ? null : "Необходимо ввести название клиента",
            details: {
                address: (address: string | undefined | null) => (address && address.trim() !== '') ? null : "Необходимо ввести адрес",
                phoneNumber: (phoneNumber: string | undefined | null) => (phoneNumber && phoneNumber.trim() !== '') ? null : "Необходимо ввести номер телефона",
                email: (email: string | undefined | null) => (email && email.trim() !== '') ? null : "Необходимо ввести почту",
                inn: (inn: number | undefined | null) => (inn && getDigitsCount(inn) >= 10) ? null : "ИНН должен содержать не менее 10 цифр",
            }
        }
    })


    const onClose = () => {
        context.closeContextModal(id);
    }
    return (
        <BaseFormModal
            {...innerProps}
            closeOnSubmit
            form={form}
            onClose={onClose}
        >
            <BaseFormModal.Body>
                <>
                    <Fieldset legend={"Основная информация"}>
                        <TextInput
                            required
                            label={"Название клиента"}
                            placeholder={"Введите название клиента"}
                            {...form.getInputProps('name')}
                        />
                    </Fieldset>
                    <Fieldset legend={"Дополнительная информация"}>
                        <TextInput
                            required
                            label={"Адрес"}
                            placeholder={"Введите адрес"}
                            {...form.getInputProps('details.address')}
                        />
                        <TextInput
                            required
                            label={"Номер телефона"}
                            placeholder={"Введите номер телефона"}
                            {...form.getInputProps('details.phoneNumber')}
                        />
                        <TextInput
                            required
                            label={"Почта"}
                            placeholder={"Введите почту"}
                            {...form.getInputProps('details.email')}
                        />
                        <NumberInput
                            required
                            hideControls
                            label={"ИНН"}
                            placeholder={"Введите ИНН"}
                            {...form.getInputProps('details.inn')}
                        />
                    </Fieldset>
                </>

            </BaseFormModal.Body>
        </BaseFormModal>
    )
}

export default ClientFormModal;