import { Button, Group, Modal, TextInput, Title, type ModalBaseProps } from "@mantine/core";
import { t } from "@/config/i18n";
import { useForm } from "@mantine/form";
import { IconCancel, IconEdit, IconPlus } from "@tabler/icons-react";
import { type Contract, type ContractInputs } from "@/services/resources/contracts";

export type ContractModalProps = ModalBaseProps & {
    currentContract?: Contract;
    handleSubmit: (contract: ContractInputs, id?: number) => void;
};

export function ContractModal({
    opened,
    onClose,
    currentContract,
    handleSubmit,
}: ContractModalProps) {
    const form = useForm<ContractInputs>({
        // initialValues: {
        //     firstname: currentContract?.firstname ?? "",
        //     lastname: currentContract?.lastname ?? "",
        //     email: currentContract?.email ?? "",
        // },
        // validate: {
        //     firstname: (value) =>
        //         !value ? `${t("name", { capfirst: true })} ${t("is required")}` : null,
        //     email: (value) =>
        //         !value ? `${t("email", { capfirst: true })} ${t("is required")}` : null,
        // },
    });

    return (
        <Modal opened={opened} onClose={onClose} title={t("create contract", { capfirst: true })}>
            <Title order={4}>{t("informations", { capfirst: true })}</Title>
            <TextInput
                label={t("contract name", { capfirst: true })}
                placeholder={t("contract name", { capfirst: true })}
                radius="sm"
                withAsterisk
                {...form.getInputProps("name")}
            />
            <TextInput
                label={t("contract email", { capfirst: true })}
                placeholder={t("contract email", { capfirst: true })}
                radius="sm"
                withAsterisk
                {...form.getInputProps("email")}
            />
            <Group mt="sm" justify="space-between">
                <Button
                    variant="filled"
                    color="red"
                    aria-label={t("cancel", { capfirst: true })}
                    leftSection={<IconCancel />}
                    onClick={() => {
                        form.clearErrors();
                        onClose();
                    }}
                >
                    {t("cancel", { capfirst: true })}
                </Button>
                <Button
                    variant="filled"
                    aria-label={
                        currentContract
                            ? t("edit contract", { capfirst: true })
                            : t("create contract", { capfirst: true })
                    }
                    leftSection={currentContract ? <IconEdit /> : <IconPlus />}
                    onClick={() => {
                        form.validate();
                        if (form.isValid()) {
                            handleSubmit(form.getValues(), currentContract?.id);
                        }
                    }}
                >
                    {currentContract
                        ? t("edit contract", { capfirst: true })
                        : t("create contract", { capfirst: true })}
                </Button>
            </Group>
        </Modal>
    );
}