import {FC} from "react";
import {useDealPageContext} from "../../../contexts/DealPageContext.tsx";
import {Button, Checkbox, Divider, Fieldset, Flex, Group, rem, Textarea, TextInput} from "@mantine/core";
import {useForm} from "@mantine/form";
import {ClientService, DealSchema, DealService, ShippingWarehouseSchema} from "../../../../../client";
import {DealStatus, DealStatusDictionary} from "../../../../../shared/enums/DealStatus.ts";
import {isEqual} from "lodash";
import {notifications} from "../../../../../shared/lib/notifications.ts";
import {useQueryClient} from "@tanstack/react-query";
import ShippingWarehouseAutocomplete
    from "../../../../../components/Selects/ShippingWarehouseAutocomplete/ShippingWarehouseAutocomplete.tsx";
import {ButtonCopyControlled} from "../../../../../components/ButtonCopyControlled/ButtonCopyControlled.tsx";
import {useClipboard} from "@mantine/hooks";
import ButtonCopy from "../../../../../components/ButtonCopy/ButtonCopy.tsx";

type Props = {
    deal: DealSchema
}

type FormType = Omit<DealSchema, 'statusHistory' | 'services' | 'products'>

const Content: FC<Props> = ({deal}) => {
    const {setSelectedDeal} = useDealPageContext();
    const clipboard = useClipboard();
    const queryClient = useQueryClient();

    const initialValues: FormType = deal;
    const form = useForm<FormType>(
        {
            initialValues: initialValues,
            validate: {
                name: (value: string) => value.length > 0 ? null : 'Название сделки не может быть пустым'
            }
        }
    )
    const updateDealInfo = async (values: FormType) => {
        return DealService.updateDealGeneralInfo({
            requestBody: {
                dealId: deal.id,
                data: {...values, shippingWarehouse: values.shippingWarehouse?.toString()}
            }
        }).then(({ok, message}) => {
            notifications.guess(ok, {message});
            if (!ok) return;
            DealService.getDealById({dealId: deal.id})
                .then((data) => {
                    setSelectedDeal(data);
                    form.setInitialValues(data);
                    queryClient.invalidateQueries({
                        queryKey: ['getDealSummaries']
                    })
                })
        });
    }
    const updateClientInfo = async (values: FormType) => {
        return ClientService.updateClient({
            requestBody: {
                data: values.client
            }
        }).then(({ok, message}) =>
            notifications.guess(ok, {message}));
    }
    const handleSubmit = async (values: FormType) => {
        // Updating client info if there changes
        if (!isEqual(values.client, deal.client)) {
            await updateClientInfo(values);
        }
        // updating deal info
        await updateDealInfo(values);
    }
    const isShippingWarehouse = (value: (ShippingWarehouseSchema | string | null | undefined)): value is ShippingWarehouseSchema => {
        return !["string", "null", "undefined"].includes((typeof value));

    }

    const onCopyGuestUrlClick = () => {
        DealService.createDealGuestUrl({
            requestBody: {
                dealId: deal.id
            }
        }).then(({ok, message, url}) => {
            if (!ok)
                notifications.guess(ok, {message});
            clipboard.copy(
                `${window.location.origin}/${url}`
            );
        });
    }
    return (
        <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
            <Flex direction={'column'}>
                <Fieldset legend={"Общие параметры"}>
                    <Flex direction={"column"} gap={rem(10)}>
                        <TextInput
                            placeholder={"Название сделки"}
                            label={"Название сделки"}
                            {...form.getInputProps('name')}
                        />
                        <TextInput
                            disabled
                            placeholder={"Дата создания"}
                            label={"Дата создания"}
                            value={new Date(deal.createdAt).toLocaleString('ru-RU')}
                        />
                        <TextInput
                            disabled
                            placeholder={"Текущий статус"}
                            label={"Текущий статус"}
                            value={DealStatusDictionary[deal.currentStatus as DealStatus]}/>
                        <Textarea
                            label={'Коментарий к сделке'}
                            placeholder={'Введите коментарий к сделке'}
                            {...form.getInputProps('comment')}
                        />
                        <ShippingWarehouseAutocomplete
                            placeholder={"Введите склад отгрузки"}
                            label={"Склад отгрузки"}
                            value={isShippingWarehouse(form.values.shippingWarehouse) ? form.values.shippingWarehouse : undefined}
                            onChange={event => {
                                if (isShippingWarehouse(event)) {
                                    form.getInputProps('shippingWarehouse').onChange(event.name)
                                    return
                                }
                                form.getInputProps('shippingWarehouse').onChange(event)
                            }}
                        />
                    </Flex>
                </Fieldset>
                <Fieldset legend={"Клиент"}>
                    <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')}
                    />
                </Fieldset>
                <Flex mt={'md'} gap={rem(10)} align={'center'} justify={'flex-end'}>
                    <Flex align={'center'} gap={rem(10)} justify={'center'}>

                        <Flex gap={rem(10)}>
                            {(deal.billRequest && deal.billRequest.pdfUrl) &&
                                <ButtonCopy
                                    onCopiedLabel={"Ссылка скопирована в буфер обмена"}
                                    value={deal.billRequest.pdfUrl}
                                >
                                    Ссылка на оплату
                                </ButtonCopy>
                            }
                            <ButtonCopyControlled
                                onCopyClick={onCopyGuestUrlClick}
                                onCopiedLabel={"Ссылка скопирована в буфер обмена"}
                                copied={clipboard.copied}>
                                Ссылка на редактирование
                            </ButtonCopyControlled>
                        </Flex>
                        <Flex gap={rem(10)}>

                            <Checkbox
                                label={"Оплачен"}
                                checked={deal.billRequest?.paid || false}
                                disabled
                            />
                            <Checkbox
                                label={"Сделка завершена"}
                                {...form.getInputProps('isCompleted')}
                            />

                            <Checkbox
                                label={"Сделка удалена"}
                                {...form.getInputProps('isDeleted')}
                            />
                        </Flex>

                    </Flex>
                    <Divider
                        orientation={'vertical'}
                    />
                    <Group align={'center'} justify={'center'}>
                        <Button
                            color={"red"}
                            type={"reset"}
                            disabled={isEqual(initialValues, form.values)}
                            onClick={() => form.reset()}
                        >Отменить изменения</Button>
                        <Button
                            variant={"default"}
                            type={"submit"}
                            disabled={isEqual(initialValues, form.values)}
                        >Сохранить изменения</Button>
                    </Group>
                </Flex>
            </Flex>

        </form>

    )
}
const DealEditDrawerGeneralTab: FC = () => {
    const {selectedDeal} = useDealPageContext();
    if (!selectedDeal) return <>No deal selected</>;
    return (
        <Content deal={selectedDeal}/>
    );
}
export default DealEditDrawerGeneralTab;