"use client";

import { FC } from "react";
import { IMaskInput } from "react-imask";
import {
    Button,
    Fieldset,
    Group,
    Input,
    Stack,
    Textarea,
    TextInput,
} from "@mantine/core";
import { useClientsCrud } from "@/app/clients/hooks/cruds/useClientsCrud";
import FormFlexRow from "@/components/ui/FormFlexRow/FormFlexRow";
import useIsMobile from "@/hooks/utils/useIsMobile";
import { ClientSchema } from "@/lib/client";
import { getClientsQueryKey } from "@/lib/client/@tanstack/react-query.gen";
import { useClientTabContext } from "../contexts/ClientTabContext";

const ClientDataForm: FC = () => {
    const { client, form, isEditorDisabled } = useClientTabContext();
    const isMobile = useIsMobile();

    const clientsQueryKey = getClientsQueryKey();
    const clientsCrud = useClientsCrud({ queryKey: clientsQueryKey });

    const handleSubmitClientInfo = (values: ClientSchema) => {
        if (!client) return;
        if (values.details?.phoneNumber === "+7 ")
            values.details!.phoneNumber = "";
        clientsCrud.onUpdate(client.id, values, () => form.resetDirty());
    };

    return (
        <Fieldset
            radius={"md"}
            legend={"Данные клиента"}
            flex={1}>
            <form
                onSubmit={form.onSubmit(values =>
                    handleSubmitClientInfo(values as ClientSchema)
                )}>
                <Stack gap={"xs"}>
                    <FormFlexRow>
                        <TextInput
                            disabled
                            placeholder={"Название"}
                            label={"Название"}
                            {...form.getInputProps("name")}
                            flex={1}
                        />
                        <TextInput
                            placeholder={"Наименование компании"}
                            label={"Наименование компании"}
                            {...form.getInputProps("companyName")}
                            flex={1}
                            disabled={isEditorDisabled}
                        />
                    </FormFlexRow>
                    <FormFlexRow>
                        <Input.Wrapper
                            label={"Номер телефона"}
                            flex={1}
                            error={
                                form.getInputProps("details.phoneNumber").error
                            }>
                            <Input
                                component={IMaskInput}
                                mask="+7 000 000-00-00"
                                placeholder={"Введите номер телефона"}
                                {...form.getInputProps("details.phoneNumber")}
                                disabled={isEditorDisabled}
                            />
                        </Input.Wrapper>
                        <TextInput
                            disabled={isEditorDisabled}
                            placeholder={"Введите email"}
                            label={"Email"}
                            {...form.getInputProps("details.email")}
                            flex={1}
                        />
                    </FormFlexRow>
                    <FormFlexRow>
                        <TextInput
                            disabled={isEditorDisabled}
                            placeholder={"Введите телеграм"}
                            label={"Телеграм"}
                            {...form.getInputProps("details.telegram")}
                            flex={1}
                        />
                        <TextInput
                            disabled={isEditorDisabled}
                            placeholder={"Введите ИНН"}
                            label={"ИНН"}
                            {...form.getInputProps("details.inn")}
                            flex={1}
                        />
                    </FormFlexRow>
                    <Textarea
                        disabled={isEditorDisabled}
                        placeholder={"Введите комментарий"}
                        label={"Комментарий"}
                        {...form.getInputProps("comment")}
                    />
                    <Group>
                        <Button
                            variant={"default"}
                            disabled={isEditorDisabled || !form.isDirty()}
                            w={isMobile ? "100%" : "auto"}
                            type={"submit"}>
                            Сохранить
                        </Button>
                    </Group>
                </Stack>
            </form>
        </Fieldset>
    );
};

export default ClientDataForm;
