import { Box, Drawer, rem, Tabs } from "@mantine/core";
import { FC, useEffect } from "react";
import { useDealPageContext } from "../../contexts/DealPageContext.tsx";
import { IconBox, IconCalendarUser, IconCubeSend, IconSettings, IconUser } 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 ClientTab from "./tabs/ClientTab.tsx";
import ShippingTab from "../../tabs/ShippingTab/ShippingTab.tsx";
// 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%",
                    display: "flex",
                    flexDirection: "column",
                    gap: rem(10),
                },
            }}>
            <Tabs
                defaultValue={"general"}
                flex={1}
                variant={"outline"}
                orientation={"vertical"}
                keepMounted={false}>
                <Tabs.List>
                    <Tabs.Tab
                        value={"general"}
                        leftSection={<IconSettings />}>
                        Общее
                    </Tabs.Tab>
                    <Tabs.Tab
                        value={"client"}
                        leftSection={<IconUser />}>
                        Клиент
                    </Tabs.Tab>
                    <Tabs.Tab
                        value={"history"}
                        leftSection={<IconCalendarUser />}>
                        История
                    </Tabs.Tab>
                    <Tabs.Tab
                        value={"servicesAndProducts"}
                        leftSection={<IconBox />}>
                        Товары и услуги
                    </Tabs.Tab>
                    <Tabs.Tab
                        value={"shipment"}
                        leftSection={<IconCubeSend />}>
                        Отгрузка
                    </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={"client"}>
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        transition={{ duration: 0.2 }}>
                        <Box p={rem(10)}>
                            <ClientTab />
                        </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={"shipment"}>
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        transition={{ duration: 0.2 }}>
                        <Box p={rem(10)}>
                            <ShippingTab />
                        </Box>
                    </motion.div>
                </Tabs.Panel>
            </Tabs>
        </Drawer>
    );
};

export default DealEditDrawer;