// * Packages
import { usePage } from "@inertiajs/react";
import { Row } from "@tanstack/react-table";
import { FileInputIcon } from "lucide-react";
// * Other
import str from "@/hooks/use-string";
import DataTable from "@/back/Components/Table/DataTable";
import useTrans from "@/hooks/use-translations";
import DataTableFilterButton from "@/back/Components/Table/DataTableFilterButton";
import RenderTranslationCell from "@/back/Components/Table/RenderTranslationCell";
import { AppEnv, Resource } from "@/back/types/global";
import { TranslationField } from "@/back/types/i18n";
import { DocumentModel } from "@/back/types/others";
import { GetTranslation, Views } from "@/lib/utils";

interface Props {
    documents: Resource;
}

const getColumns = (appEnv: AppEnv) => {
    return [
        {
            accessorKey: "name",
            header: ({ column }: { column: { id: string } }) => (
                <DataTableFilterButton
                    label={str(
                        GetTranslation(`validation.attributes.${column.id}`),
                    )
                        .ucFirst()
                        .value()}
                    field={column.id}
                />
            ),
            cell: ({ row }: { row: Row<DocumentModel> }) => (
                <RenderTranslationCell value={row.getValue("name")} />
            ),
        },
        {
            accessorKey: "path",
            header: ({ column }: { column: { id: string } }) => (
                <DataTableFilterButton
                    label={str(GetTranslation(`validation.custom.${column.id}`))
                        .ucFirst()
                        .value()}
                    field={column.id}
                />
            ),
            cell: ({ row }: { row: Row<DocumentModel> }) => {
                return (row.getValue("path") as TranslationField)[
                    appEnv.locale
                ] ? (
                    <a
                        target="_blank"
                        className="text-blue-500 underline"
                        href={`${appEnv.url}/${
                            (row.getValue("path") as TranslationField)[
                                appEnv.locale
                            ]
                        }`}
                        rel="noreferrer"
                    >
                        {`${appEnv.url}/${
                            (row.getValue("path") as TranslationField)[
                                appEnv.locale
                            ]
                        }`}
                    </a>
                ) : (
                    <p className="text-muted-foreground italic m-0">
                        {GetTranslation("back.table_not_known")}
                    </p>
                );
            },
        },
    ];
};

export default function AssociatedDocumentList(props: Props) {
    const { documents } = props;
    const { appEnv } = usePage().props as unknown as {
        appEnv: AppEnv;
    };
    const documentColumns = getColumns(appEnv);

    return (
        <>
            <h3 className="text-2xl font-semibold leading-none tracking-tight flex flex-row w-full items-start my-4">
                <FileInputIcon className="me-2" />
                {str(
                    useTrans("back.associated_model", {
                        params: {
                            model: useTrans("models.classes.document", {
                                choice: 2,
                            }),
                        },
                        choice: 2,
                    }),
                )
                    .ucFirst()
                    .value()}
            </h3>
            <DataTable
                columns={documentColumns}
                modelRoute="documents"
                modelsPaginate={documents}
                actions={[Views.VISUALIZATION, Views.EDITION]}
            />
        </>
    );
}