import { aspectQueryOptions } from "@/modules/aspectManagement/queries/aspectQueries";
import PageTemplate from "@/components/PageTemplate";
import { createLazyFileRoute } from "@tanstack/react-router";
import AspectFormModal from "@/modules/aspectManagement/modals/AspectFormModal";
import ExtractQueryDataType from "@/types/ExtractQueryDataType";
import { createColumnHelper } from "@tanstack/react-table";
import { Flex } from "@mantine/core";
import createActionButtons from "@/utils/createActionButton";
import { TbEye, TbPencil, TbTrash } from "react-icons/tb";
import AspectDeleteModal from "@/modules/aspectManagement/modals/AspectDeleteModal";

export const Route = createLazyFileRoute("/_dashboardLayout/aspect/")({
    component: AspectPage,
});

type DataType = ExtractQueryDataType<typeof aspectQueryOptions>;

const columnHelper = createColumnHelper<DataType>();

export default function AspectPage() {
    return (
        <PageTemplate
            title="Manajemen Aspek"
            queryOptions={aspectQueryOptions}
            modals={[<AspectFormModal />, <AspectDeleteModal />]}
            columnDefs={[
                // Number of columns
                columnHelper.display({
                    header: "#",
                    cell: (props) => props.row.index + 1,
                }),

                // Aspect columns
                columnHelper.display({
                    header: "Nama Aspek",
                    cell: (props) => props.row.original.name || "Tidak ada Aspek",
                }),

                // Sub aspect columns
                columnHelper.display({
                    header: "Sub Aspek",
                    cell: (props) => {
                        const subAspects = props.row.original.subAspects || [];
                        return subAspects.length > 0 ? (
                            <span>
                                {subAspects.map((subAspect, index) => (
                                    <span key={subAspect.id}>
                                        {subAspect.name}
                                        {index < subAspects.length - 1 ? ", " : ""}
                                    </span>
                                ))}
                            </span>
                        ) : (
                            <span>Tidak ada Sub Aspek</span>
                        );
                    },
                }),

                // Actions columns
                columnHelper.display({
                    header: "Aksi",
                    cell: (props) => (
                        <Flex gap="xs">
                            {createActionButtons([
                                {
                                    label: "Detail",
                                    permission: true,
                                    action: `?detail=${props.row.original.id}`,
                                    color: "green",
                                    icon: <TbEye />,
                                },
                                {
                                    label: "Edit",
                                    permission: true,
                                    action: `?edit=${props.row.original.id}`,
                                    color: "orange",
                                    icon: <TbPencil />,
                                },
                                {
                                    label: "Hapus",
                                    permission: true,
                                    action: `?delete=${props.row.original.id}`,
                                    color: "red",
                                    icon: <TbTrash />,
                                },
                            ])}
                        </Flex>
                    ),
                }),
            ]}
        />
    );
}