import {Box, Drawer, rem, Tabs, Text} from "@mantine/core";
import {FC, useEffect, useRef} from "react";
import DealServicesTable from "../../components/DealServicesTable/DealServicesTable.tsx";
import {useDealPageContext} from "../../contexts/DealPageContext.tsx";
import {DealProductSchema, DealService, DealServiceSchema} from "../../../../client";
import {notifications} from "../../../../shared/lib/notifications.ts";
import {modals} from "@mantine/modals";
import {BaseTableRef} from "../../../../components/BaseTable/BaseTable.tsx";
import DealProductsTable from "../../components/DealProductsTable/DealProductsTable.tsx";
import {IconBox, IconCalendarUser, IconSettings} from "@tabler/icons-react";
import DealStatusChangeTable from "../../components/DealStatusChangeTable/DealStatusChangeTable.tsx";
import DealEditDrawerGeneralTab from "./tabs/DealEditDrawerGeneralTab.tsx";
import {useQueryClient} from "@tanstack/react-query";
import ProductAndServiceTab from "../../tabs/ProductAndServiceTab/ProductAndServiceTab.tsx";
import {motion} from "framer-motion";
// import styles from './DealEditDrawer.module.css';

const useDealServicesTableState = () => {
    const {selectedDeal, setSelectedDeal} = useDealPageContext();
    const tableRef = useRef<BaseTableRef<DealServiceSchema>>(null);

    const onServiceUpdate = (service: DealServiceSchema) => {
        if (!selectedDeal) return;
        DealService.updateDealService({
            requestBody: {
                dealId: selectedDeal.id,
                service
            }
        }).then(async ({ok, message}) => {

            if (!ok) {
                notifications.guess(ok, {message});
                return;
            }
            await DealService.getDealById({dealId: selectedDeal.id})
                .then(setSelectedDeal)
        })
    }
    const onServiceDelete = (service: DealServiceSchema) => {
        if (!selectedDeal) return;
        modals.openConfirmModal({
            title: "Удаление услуги",
            children: (
                <>
                    <Text>
                        Вы уверены, что хотите удалить услугу:
                    </Text>
                    <Text>
                        {service.service.name}?
                    </Text>

                </>

            ),
            onConfirm: () => {
                DealService.deleteDealService({
                    requestBody: {
                        dealId: selectedDeal.id,
                        serviceId: service.service.id
                    }
                }).then(async ({ok, message}) => {
                    if (!ok) {
                        notifications.guess(ok, {message});
                        return;
                    }
                    await DealService.getDealById({dealId: selectedDeal.id})
                        .then(setSelectedDeal)
                })
            },
            labels: {
                cancel: "Отмена",
                confirm: "Удалить"
            }
        })
    }
    const onServiceCreate = (service: DealServiceSchema) => {
        if (!selectedDeal) return;
        DealService.addDealService({
            requestBody: {
                dealId: selectedDeal.id,
                serviceId: service.service.id,
                quantity: service.quantity,
                price: service.price
            }
        }).then(async ({ok, message}) => {
            if (!ok) {
                notifications.guess(ok, {message});
                return;
            }
            await DealService.getDealById({dealId: selectedDeal.id})
                .then(setSelectedDeal)
        })
    }
    const onsServiceMultipleDelete = (items: DealServiceSchema[]) => {
        if (!selectedDeal) return;
        modals.openConfirmModal({
            title: "Удаление услуг",
            children: (
                <>
                    <Text>
                        Вы уверены, что хотите удалить выбранные услуги?
                    </Text>
                </>
            ),
            onConfirm: () => {
                DealService.deleteMultipleDealServices({
                    requestBody: {
                        dealId: selectedDeal.id,
                        serviceIds: items.map(item => item.service.id)
                    }
                }).then(async ({ok, message}) => {
                    if (!ok) {
                        notifications.guess(ok, {message});
                        return;
                    }
                    await DealService.getDealById({dealId: selectedDeal.id})
                        .then(setSelectedDeal)
                })
            },
            labels: {
                cancel: "Отмена",
                confirm: "Удалить"
            }
        })
    }

    return {
        onServiceUpdate,
        onServiceDelete,
        onServiceCreate,
        onsServiceMultipleDelete,
        tableRef,
        services: selectedDeal?.services || []
    }
}
const DealEditDrawerServicesTable = () => {
    const {
        services,
        tableRef,
        onServiceCreate,
        onServiceUpdate,
        onServiceDelete,
        onsServiceMultipleDelete
    } = useDealServicesTableState();

    return (<DealServicesTable
        tableRef={tableRef}
        items={services}
        onChange={onServiceUpdate}
        onDelete={onServiceDelete}
        onCreate={onServiceCreate}
        onMultipleDelete={onsServiceMultipleDelete}
    />)
}

const useDealProductTableState = () => {
    const {selectedDeal, setSelectedDeal} = useDealPageContext();

    const onProductUpdate = (product: DealProductSchema) => {
        if (!selectedDeal) return;
        DealService.updateDealProduct({
            requestBody: {
                dealId: selectedDeal.id,
                product: product
            }
        }).then(async ({ok, message}) => {
            notifications.guess(ok, {message});
            if (!ok) return;
            await DealService.getDealById({dealId: selectedDeal.id})
                .then(setSelectedDeal)
        })
    }
    const onProductDelete = (product: DealProductSchema) => {
        if (!selectedDeal) return;
        modals.openConfirmModal({
            title: "Удаление товара",
            children: (
                <>
                    <Text>
                        Вы уверены, что хотите удалить товар:
                    </Text>
                    <Text>
                        {product.product.name}?
                    </Text>

                </>

            ),
            onConfirm: () => {
                DealService.deleteDealProduct({
                    requestBody: {
                        dealId: selectedDeal.id,
                        productId: product.product.id
                    }
                }).then(async ({ok, message}) => {
                    if (!ok) {
                        notifications.guess(ok, {message});
                        return;
                    }
                    await DealService.getDealById({dealId: selectedDeal.id})
                        .then(setSelectedDeal)
                })
            },
            labels: {
                cancel: "Отмена",
                confirm: "Удалить"
            }
        })
    }
    const onProductCreate = (product: DealProductSchema) => {
        if (!selectedDeal) return;
        DealService.addDealProduct({
            requestBody: {
                dealId: selectedDeal.id,
                product: product
            }
        }).then(async ({ok, message}) => {
            if (!ok) {
                notifications.guess(ok, {message});
                return;
            }
            await DealService.getDealById({dealId: selectedDeal.id})
                .then(setSelectedDeal)
        })
    }
    const onProductMultipleDelete = (items: DealProductSchema[]) => {
        if (!selectedDeal) return;
        modals.openConfirmModal({
            title: "Удаление товаров",
            children: (
                <>
                    <Text>
                        Вы уверены, что хотите удалить выбранные товары?
                    </Text>
                </>
            ),
            onConfirm: () => {
                DealService.deleteMultipleDealProducts({
                    requestBody: {
                        dealId: selectedDeal.id,
                        productIds: items.map(item => item.product.id)
                    }
                }).then(async ({ok, message}) => {
                    if (!ok) {
                        notifications.guess(ok, {message});
                        return;
                    }
                    await DealService.getDealById({dealId: selectedDeal.id})
                        .then(setSelectedDeal)
                })
            },
            labels: {
                cancel: "Отмена",
                confirm: "Удалить"
            }
        })
    }
    return {
        clientId: selectedDeal?.clientId || -1,
        products: selectedDeal?.products || [],
        onProductUpdate,
        onProductDelete,
        onProductCreate,
        onProductMultipleDelete
    }
}
const DealEditDrawerProductsTable = () => {
    const {
        products,
        clientId,
        onProductUpdate,
        onProductDelete,
        onProductCreate,
        onProductMultipleDelete,
    } = useDealProductTableState();
    return (
        <DealProductsTable
            clientId={clientId}
            items={products}
            onChange={onProductUpdate}
            onMultipleDelete={onProductMultipleDelete}
            onDelete={onProductDelete}
            onCreate={onProductCreate}

        />
    )
}

const useDealStatusChangeState = () => {
    const {selectedDeal} = useDealPageContext();
    return {
        statusHistory: selectedDeal?.statusHistory || []
    }
}
const DealEditDrawerStatusChangeTable = () => {
    const {statusHistory} = useDealStatusChangeState();

    return (
        <DealStatusChangeTable
            items={statusHistory}
        />)
}

const useDealEditDrawerState = () => {
    const {selectedDeal, setSelectedDeal} = useDealPageContext();
    return {
        isVisible: selectedDeal !== undefined,
        onClose: () => setSelectedDeal(undefined)
    }
}

const DealEditDrawer: FC = () => {
    const {isVisible, onClose} = useDealEditDrawerState();
    const queryClient = useQueryClient();
    useEffect(() => {
        if (isVisible) return;
        queryClient.invalidateQueries({queryKey: ["getDealSummaries"]})
    }, [isVisible]);
    return (
        <Drawer
            size={"calc(100vw - 150px)"}
            position={"right"}
            onClose={onClose}
            removeScrollProps={{allowPinchZoom: true}}
            withCloseButton={false}
            opened={isVisible}
            styles={{body: {height: '100%'}}}
        >
            <Tabs
                defaultValue={"general"}
                h={'100%'}
                variant={"outline"}
                orientation={"vertical"}
                keepMounted={false}

            >
                <Tabs.List
                >
                    <Tabs.Tab value={"general"} leftSection={<IconSettings/>}>
                        Общее
                    </Tabs.Tab>
                    <Tabs.Tab value={"history"} leftSection={<IconCalendarUser/>}>
                        История
                    </Tabs.Tab>
                    <Tabs.Tab value={"servicesAndProducts"} leftSection={<IconBox/>}>
                        Товары и услуги
                    </Tabs.Tab>
                </Tabs.List>
                <Tabs.Panel value={"general"}>
                    <motion.div

                        initial={{opacity: 0}}
                        animate={{opacity: 1}}
                        transition={{duration: 0.2}}
                    >

                        <Box h={"100%"} w={"100%"} p={rem(10)}>
                            <DealEditDrawerGeneralTab/>

                        </Box>
                    </motion.div>

                </Tabs.Panel>
                <Tabs.Panel value={"history"}>
                    <motion.div

                        initial={{opacity: 0}}
                        animate={{opacity: 1}}
                        transition={{duration: 0.2}}
                    >
                        <Box p={rem(10)}>
                            <DealEditDrawerStatusChangeTable/>
                        </Box>
                    </motion.div>
                </Tabs.Panel>
                <Tabs.Panel value={"servicesAndProducts"}>
                    <motion.div

                        initial={{opacity: 0}}
                        animate={{opacity: 1}}
                        transition={{duration: 0.2}}
                    >
                        <Box p={rem(10)}>
                            <ProductAndServiceTab/>
                        </Box>
                    </motion.div>
                </Tabs.Panel>
                <Tabs.Panel value={"services"}>
                    <Box p={rem(10)}>
                        <DealEditDrawerServicesTable/>
                    </Box>
                </Tabs.Panel>
                <Tabs.Panel value={"products"}>
                    <Box p={rem(10)}>
                        <DealEditDrawerProductsTable/>
                    </Box>
                </Tabs.Panel>
            </Tabs>
        </Drawer>
    );
}

export default DealEditDrawer;