import { useMemo } from "react";
import {
    IconChevronDown,
    IconChevronsDown,
    IconChevronsRight,
    IconChevronsUp,
    IconChevronUp,
} from "@tabler/icons-react";
import { DataTableColumn } from "mantine-datatable";
import { Box, Center, Group, Text } from "@mantine/core";
import { GroupedServices } from "@/app/services/components/shared/ServicesTable/types/GroupedServices";
import { useServicesContext } from "@/app/services/contexts/ServicesContext";
import useCategoriesActions from "@/app/services/hooks/useCategoriesActions";
import UpdateDeleteTableActions from "@/components/ui/BaseTable/components/UpdateDeleteTableActions";
import useIsMobile from "@/hooks/utils/useIsMobile";

type Props = {
    expandedCategoryIds: number[];
    setExpandedCategoryIds: (ids: number[]) => void;
};

const useServicesOuterTableColumns = ({
    expandedCategoryIds,
    setExpandedCategoryIds,
}: Props) => {
    const isMobile = useIsMobile();
    const { onChangeCategory } = useCategoriesActions();
    const { categoriesCrud, categories } = useServicesContext();

    const onExpandAllClick = () => {
        if (expandedCategoryIds.length !== categories.length) {
            setExpandedCategoryIds(categories.map(c => c.id));
            return;
        }
        setExpandedCategoryIds([]);
    };

    const getExpandAllIcon = () => {
        if (expandedCategoryIds.length === categories.length)
            return <IconChevronsUp />;
        if (expandedCategoryIds.length === 0) return <IconChevronsDown />;
        return <IconChevronsRight />;
    };

    return useMemo(
        () =>
            [
                { accessor: "", hiddenContent: true, width: isMobile ? 1 : 3 },
                {
                    accessor: "category.name",
                    title: (
                        <Group>
                            <Box
                                style={{ cursor: "pointer" }}
                                onClick={onExpandAllClick}>
                                {getExpandAllIcon()}
                            </Box>
                            Категория
                        </Group>
                    ),
                    render: ({ category: { id, name } }) => (
                        <Group
                            key={id}
                            wrap={"nowrap"}>
                            {expandedCategoryIds.includes(id) ? (
                                <IconChevronUp />
                            ) : (
                                <IconChevronDown />
                            )}
                            <Text>{name}</Text>
                        </Group>
                    ),
                    width: isMobile ? 100 : 450,
                },
                {
                    accessor: "actions",
                    title: isMobile ? "" : "Действия",
                    sortable: false,
                    textAlign: "center",
                    width: isMobile ? 2 : 50,
                    render: ({ category }) => (
                        <Center>
                            <UpdateDeleteTableActions
                                onDelete={() =>
                                    categoriesCrud.onDelete(category)
                                }
                                onChange={() => onChangeCategory(category)}
                                dotsForMobile
                            />
                        </Center>
                    ),
                },
            ] as DataTableColumn<GroupedServices>[],
        [expandedCategoryIds, categories]
    );
};

export default useServicesOuterTableColumns;
