import useUsersTableColumns from "../hooks/useUsersTableColumns.tsx";
import { UserDepartmentSectionSchema } from "../../../../../client";
import { DataTable } from "mantine-datatable";
import "mantine-datatable/styles.css";
import { Box } from "@mantine/core";
import { IconChevronRight, IconUsers } from "@tabler/icons-react";
import clsx from "clsx";
import classes from "./DepartmentsTree/DepartmentsTree.module.css";
import { useState } from "react";

type Props = {
    users: UserDepartmentSectionSchema[];
    sectionId: number;
    level: number;
}

const UsersTable = ({ users, sectionId, level }: Props) => {
    const columns = useUsersTableColumns({ sectionId });
    const [userIds, setUserIds] = useState<number[]>([1]);

    const header = [
        {
            id: 1,
            title: "Пользователи",
        },
    ];

    return (
        <DataTable
            noHeader
            withColumnBorders
            className={clsx(classes.usersTableBorder)}
            columns={[
                {
                    accessor: "title",
                    noWrap: true,
                    render: ({ id, title }) => (
                        <Box component="span" ml={20 * level}>
                            <IconChevronRight
                                className={clsx(classes.icon, classes.expandIcon, {
                                    [classes.expandIconRotated]: userIds.includes(id),
                                })}
                            />
                            <IconUsers className={classes.icon} />
                            <span>{title}</span>
                        </Box>
                    ),
                },
            ]}
            records={header}
            rowExpansion={{
                allowMultiple: true,
                expanded: { recordIds: userIds, onRecordIdsChange: setUserIds },
                content: () => (
                    <Box pl={20 * (level + 2.5)}>
                        <DataTable
                            withTableBorder
                            withColumnBorders
                            columns={columns}
                            records={users}
                        />
                    </Box>
                ),
            }}
        />
    );
};

export default UsersTable;
