import { DataTable } from "mantine-datatable";
import { Box, Stack } from "@mantine/core";
import { IconBuilding, IconChevronRight } from "@tabler/icons-react";
import clsx from "clsx";
import classes from "./DepartmentsTree/DepartmentsTree.module.css";
import { DepartmentSchema, DepartmentSectionSchema } from "../../../../../client";
import "mantine-datatable/styles.css";
import { useState } from "react";
import DepartmentActions from "./DepartmentActions.tsx";
import UsersTable from "./UsersTable.tsx";

type Props = {
    parentItem: DepartmentSchema | DepartmentSectionSchema;
    level: number;
}

const DepartmentSectionsTable = ({ parentItem, level }: Props) => {
    const [departmentSectionIds, setDepartmentSectionIds] = useState<number[]>(
        parentItem.sections?.map(section => section.id) ?? [],
    );

    return (
        <DataTable
            noHeader
            columns={[
                {
                    accessor: "name",
                    noWrap: true,
                    render: ({ id, name }) => (
                        <Box component="span" ml={20 * level}>
                            <IconChevronRight
                                className={clsx(classes.icon, classes.expandIcon, {
                                    [classes.expandIconRotated]: departmentSectionIds.includes(id),
                                })}
                            />
                            <IconBuilding className={classes.icon} />
                            <span>{name}</span>
                        </Box>
                    ),
                },
                {
                    accessor: "actions",
                    title: "",
                    width: "0%",
                    render: (departmentSection) => (
                        <DepartmentActions element={departmentSection} isSection={true} level={level} />
                    ),
                },
            ]}
            records={parentItem.sections?.sort((a, b) => a.id - b.id)}
            rowExpansion={{
                allowMultiple: true,
                expanded: { recordIds: departmentSectionIds, onRecordIdsChange: setDepartmentSectionIds },
                content: ({ record }) => (
                    <Stack gap={0}>
                        {record.users && record.users.length > 0 && (
                            <UsersTable
                                key={`1 ${record.id}`}
                                sectionId={record.id}
                                users={record.users}
                                level={level + 1}
                            />
                        )}
                        {record.sections && record.sections.length > 0 && (
                            <DepartmentSectionsTable
                                key={`2 ${record.id}`}
                                parentItem={record}
                                level={level + 1}
                            />
                        )}
                    </Stack>
                ),
            }}
        />
    );
};

export default DepartmentSectionsTable;
