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";
import { Button } from "@/shadcn/components/ui/button";

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

type DataType = ExtractQueryDataType<typeof aspectQueryOptions>;

const columnHelper = createColumnHelper<DataType>();

export default function AspectPage() {
    // Function to update URL query string without refreshing
    const updateQueryString = (key: string, value: string) => {
        const searchParams = new URLSearchParams(window.location.search);
        searchParams.set(key, value);
        window.history.pushState({}, "", `?${searchParams.toString()}`);
    };

    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) => (
                        <div className="flex flex-row w-fit items-center rounded gap-2">
                            <Button
                                variant="ghost"
                                className="w-fit items-center hover:bg-gray-300 border"
                                onClick={() => updateQueryString("detail", props.row.original.id)}
                            >
                                <TbEye className="text-black" />
                            </Button>
                            <Button
                                variant="ghost"
                                className="w-fit items-center hover:bg-gray-300 border"
                                onClick={() => updateQueryString("edit", props.row.original.id)}
                            >
                                <TbPencil className="text-black" />
                            </Button>
                            <Button
                                variant="ghost"
                                className="w-fit items-center hover:bg-gray-300 border"
                                onClick={() => updateQueryString("delete", props.row.original.id)}
                            >
                                <TbTrash className="text-black" />
                            </Button>
                        </div>
                    ),
                }),
            ]}
        />
    );
}