import { Button, Fieldset, Flex, rem, Textarea, TextInput } from "@mantine/core";
import { useDealPageContext } from "../../../contexts/DealPageContext.tsx";
import { useForm } from "@mantine/form";
import { DealGeneralFormType } from "./DealEditDrawerGeneralTab.tsx";
import { ClientService, DealSchema, DealService } from "../../../../../client";
import { isEqual } from "lodash";
import { notifications } from "../../../../../shared/lib/notifications.ts";
import { useQueryClient } from "@tanstack/react-query";

const ClientTab = () => {
    const { selectedDeal: deal, setSelectedDeal } = useDealPageContext();
    const initialValues: DealGeneralFormType = deal as DealSchema;
    const queryClient = useQueryClient();

    const form = useForm<DealGeneralFormType>(
        {
            initialValues: initialValues,
            validate: {
                name: (value: string) => value.length > 0 ? null : "Название сделки не может быть пустым",
            },
        },
    );
    const hasChanges = !isEqual(form.values, initialValues);
    const updateClientInfo = async (values: DealGeneralFormType) => {
        return ClientService.updateClient({
            requestBody: {
                data: values.client,
            },
        }).then(({ ok, message }) => notifications.guess(ok, { message }));
    };
    const update = async () => {
        return DealService.getDealById({ dealId: form.values.id }).then(data => {
            setSelectedDeal(data);
            form.setInitialValues(data);
            queryClient.invalidateQueries({
                queryKey: ["getDealSummaries"],
            });
        });
    };
    const handleSave = () => {
        updateClientInfo(form.values).then(async () => {
            await update();
        });
    };
    const handleCancel = () => {
        form.setInitialValues(initialValues);
    };
    return (
        <Flex direction={"column"} flex={1} gap={rem(10)}>
            <Flex flex={1}>
                <Fieldset legend={"Клиент"} flex={1}>
                    <TextInput
                        disabled
                        placeholder={"Название"}
                        label={"Название"}
                        value={deal?.client.name}
                    />
                    <TextInput
                        placeholder={"Введите телефон"}
                        label={"Телефон клиента"}
                        {...form.getInputProps("client.details.phoneNumber")}
                    />
                    <TextInput
                        placeholder={"Введите email"}
                        label={"Email"}
                        {...form.getInputProps("client.details.email")}
                    />
                    <TextInput
                        placeholder={"Введите телеграм"}
                        label={"Телеграм"}
                        {...form.getInputProps("client.details.telegram")}
                    />
                    <TextInput
                        placeholder={"Введите ИНН"}
                        label={"ИНН"}
                        {...form.getInputProps("client.details.inn")}
                    />
                    <Textarea
                        placeholder={"Введите комментарий"}
                        label={"Комментарий"}
                        {...form.getInputProps("client.comment")}
                    />

                </Fieldset>
            </Flex>
            <Flex
                gap={rem(10)}
                justify={"flex-end"}
                display={!hasChanges ? "none" : "flex"}
            >
                <Button onClick={handleCancel} variant={"default"}>Отмена</Button>
                <Button onClick={handleSave} variant={"default"}>Сохранить</Button>
            </Flex>
        </Flex>

    );
};
export default ClientTab;