'use client';
import React, { useState } from "react";
import TableComponent from "@/components/mutual/tableView/FullTableComp/component";
import CreateForm from "@/components/mutual/tableView/mutual/CreateForm";
import UpdateForm from "@/components/mutual/tableView/mutual/UpdateForm";
import ViewForm from "@/components/mutual/tableView/mutual/ViewForm";

import { EyeIcon, PencilIcon, PlusCircle, ArrowLeftFromLineIcon, ExpandIcon } from "lucide-react";
import { ContentProps } from "@/validations/mutual/dashboard/props";
import { getSchemaByLanguage } from "@/schemas/custom/application/schemas";
import { API_BASE_URL } from "@/config/config";
import { renderLastRowComponent } from "@/components/mutual/navigators/component";


// This is a mock page dont use it
const SuperUserServicePage: React.FC<ContentProps> = ({ lang, translations, activePageUrl, mode }) => {
    const [selectedRow, setSelectedRow] = useState<any>(null);

    const getSchema = getSchemaByLanguage(lang)
    const basePageUrl = `/panel/${lang}/${activePageUrl}?mode=`
    const isList = mode === 'shortList' || mode === 'fullList'
    const changeList = mode === 'shortList' ? `${basePageUrl}fullList` : `${basePageUrl}shortList`

    const RenderBackToList = renderLastRowComponent(`${basePageUrl}shortList`, ArrowLeftFromLineIcon, "backToList")
    const redirectUrls = {
        table: {
            update: renderLastRowComponent(`${basePageUrl}update`, PencilIcon, "update"),
            view: renderLastRowComponent(`${basePageUrl}view`, EyeIcon, "view"),
        },
        page: {
            create: renderLastRowComponent(`${basePageUrl}create`, PlusCircle, "create"),
            size: renderLastRowComponent(changeList, ExpandIcon, "size-table"),
        }
    }
    const listWithTableProps = {
        urls: { list: `${API_BASE_URL}/applications/pages` },
        schemas: { table: getSchema.shortSchema },
        translations: translations,
        redirectUrls: redirectUrls,
        initPagination: { page: 1, size: 10, orderFields: [], orderTypes: [], query: {} },
        setSelectedRow: setSelectedRow,
    }
    const CreateFormProps = {
        schemas: { create: getSchema.createSchema },
        labels: getSchema.labels,
        selectedRow: selectedRow,
    }
    const UpdateFormProps = {
        rollbackTo: changeList,
        schemas: { update: getSchema.updateSchema },
        labels: getSchema.labels,
        selectedRow: selectedRow,
    }
    const ViewFormProps = {
        rollbackTo: changeList,
        schemas: { view: getSchema.detailSchema },
        selectedRow: selectedRow,
        labels: getSchema.labels,
    }
    const shortAddProps = { ...listWithTableProps, schemas: { table: getSchema.shortSchema }, columns: { table: getSchema.shortColumns } }
    const fullAddProps = { ...listWithTableProps, schemas: { table: getSchema.detailSchema }, columns: { table: getSchema.columns } }
    return (
        <div>
            {!isList && RenderBackToList}
            {isList && mode === 'shortList' && <TableComponent {...shortAddProps} />}
            {isList && mode === 'fullList' && <TableComponent {...fullAddProps} />}
            {mode === 'create' && <CreateForm {...CreateFormProps} />}
            {mode === 'update' && <UpdateForm {...UpdateFormProps} />}
            {mode === 'view' && <ViewForm {...ViewFormProps} />}
        </div>
    );
}

export default SuperUserServicePage