"use client";

import { Fieldset, Stack, Textarea, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import { ContextModalProps } from "@mantine/modals";
import isValidInn from "@/app/clients/utils/isValidInn";
import {
    ClientSchema,
    CreateClientSchema,
    UpdateClientSchema,
} from "@/lib/client";
import BaseFormModal, {
    CreateEditFormProps,
} from "@/modals/base/BaseFormModal/BaseFormModal";

type Props = CreateEditFormProps<
    ClientSchema,
    CreateClientSchema,
    UpdateClientSchema
>;

const ClientEditorModal = ({
    context,
    id,
    innerProps,
}: ContextModalProps<Props>) => {
    const initialValues = innerProps.isEditing
        ? innerProps.entity
        : ({
              name: "",
              companyName: "",
              details: {
                  telegram: "",
                  phoneNumber: "",
                  email: "",
                  inn: "",
              },
              comment: "",
          } as CreateClientSchema);

    const form = useForm({
        initialValues,
        validate: {
            name: name =>
                (!name || name.trim() === "") &&
                "Необходимо ввести название клиента",
            details: {
                inn: inn => inn.length > 0 && !isValidInn(inn) && "Некорректный ИНН",
            },
        },
    });

    return (
        <BaseFormModal
            {...innerProps}
            closeOnSubmit
            form={form}
            onClose={() => context.closeContextModal(id)}>
            <Fieldset legend={"Основная информация"}>
                <TextInput
                    required
                    label={"Название клиента"}
                    placeholder={"Введите название клиента"}
                    {...form.getInputProps("name")}
                />
            </Fieldset>
            <Fieldset legend={"Дополнительная информация"}>
                <Stack gap={"xs"}>
                    <TextInput
                        label={"Телеграм"}
                        placeholder={"Введите телеграм"}
                        {...form.getInputProps("details.telegram")}
                    />
                    <TextInput
                        label={"Номер телефона"}
                        placeholder={"Введите номер телефона"}
                        {...form.getInputProps("details.phoneNumber")}
                    />
                    <TextInput
                        label={"Почта"}
                        placeholder={"Введите почту"}
                        {...form.getInputProps("details.email")}
                    />
                    <TextInput
                        label={"ИНН"}
                        placeholder={"Введите ИНН"}
                        {...form.getInputProps("details.inn")}
                    />
                    <TextInput
                        label={"Название компании"}
                        placeholder={"Введите название компании"}
                        {...form.getInputProps("companyName")}
                    />
                    <Textarea
                        label={"Комментарий"}
                        placeholder={"Введите комментарий"}
                        {...form.getInputProps("comment")}
                    />
                </Stack>
            </Fieldset>
        </BaseFormModal>
    );
};

export default ClientEditorModal;