import { DataTable } from "mantine-datatable";
import { IconChevronRight, IconSpace } from "@tabler/icons-react";
import clsx from "clsx";
import classes from "../../../OrganizationalStructureTab/components/DepartmentsTree/DepartmentsTree.module.css";
import { useState } from "react";
import { PlaceSchema } from "../../../../../../client";
import PlaceActions from "./PlaceActions.tsx";

type Props = {
    place: PlaceSchema;
}

const Place = ({ place }: Props) => {
    const [placeTypeIds, setPlaceTypeIds] = useState<number[]>([]);

    return (
        <DataTable
            noHeader
            columns={[
                {
                    accessor: "name",
                    title: "Место",
                    noWrap: true,
                    render: ({ id, number, placeType }) => (
                        <>
                            <IconChevronRight
                                className={clsx(classes.icon, classes.expandIcon, {
                                    [classes.expandIconRotated]: placeTypeIds?.includes(id),
                                })}
                            />
                            <IconSpace className={classes.icon} />
                            <span>{placeType.name} {number}</span>
                        </>
                    ),
                },
                {
                    accessor: "actions",
                    title: "",
                    width: "0%",
                    render: (place) => (
                        <PlaceActions place={place} />
                    ),
                },
            ]}
            records={place.children?.sort((a, b) => a.id - b.id)}
            rowExpansion={{
                allowMultiple: true,
                expanded: { recordIds: placeTypeIds, onRecordIdsChange: setPlaceTypeIds },
                content: ({ record }) => (
                    <Place place={record} />
                ),
            }}
        />
    );
};

export default Place;