'use client';
import React, { useState } from "react";
import TableComponent from "@/components/mutual/tableView/FullTableComp/component";
import { ContentProps } from "@/validations/mutual/dashboard/props";
import { EyeIcon, PencilIcon, PlusCircle, ArrowLeftFromLineIcon } from "lucide-react";
import Link from "next/link";
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 { useRouter } from "next/navigation";

// This is a mock page dont use it
const superUserTenantSomething: React.FC<ContentProps> = ({ lang, translations, activePageUrl, mode }) => {
    const router = useRouter()
    const [selectedRow, setSelectedRow] = useState<any>(null);
    const pageUrl = `/${lang}/${activePageUrl}?mode=list`
    const urls = { list: "http://localhost:3000/api/tst" }
    const initPaginationDefault = { page: 1, size: 10, orderFields: [], orderTypes: [], query: {} }
    const renderLastRowComponent = (reDirectUrl: string, IconToWrap: any) => {
        return (<Link className="flex items-center gap-2" replace href={reDirectUrl} ><IconToWrap /></Link>)
    }
    const redirectUrls = {
        table: {
            update: renderLastRowComponent(`/${lang}/${activePageUrl}?mode=update`, PencilIcon),
            view: renderLastRowComponent(`/${lang}/${activePageUrl}?mode=view`, EyeIcon),
        },
        page: {
            create: renderLastRowComponent(`/${lang}/${activePageUrl}?mode=create`, PlusCircle),
        }
    }
    const schemas = { list: {} }
    const columns = [
        "firstName",
        "lastName",
        "email",
        "phoneNumber",
        "country",
        "description",
        "isDeleted",
        "isConfirmed",
        "createdAt",
        "updatedAt",
    ]
    const ListWithTableProps = {
        urls: {
            list: "http://localhost:3000/api/tst",
        },
        schemas: schemas,
        translations: translations,
        columns: columns,
        redirectUrls: redirectUrls,
        initPagination: initPaginationDefault,
        setSelectedRow: setSelectedRow,
    }
    const CreateFormProps = {
        schemas: schemas,
        selectedRow: selectedRow,
    }
    const UpdateFormProps = {
        rollbackTo: pageUrl,
        schemas: schemas,
        selectedRow: selectedRow,
    }
    const ViewFormProps = {
        rollbackTo: pageUrl,
        schemas: schemas,
        selectedRow: selectedRow,
    }

    const RenderBackToList = <div onClick={() => setSelectedRow(null)}>
        {renderLastRowComponent(pageUrl, ArrowLeftFromLineIcon)}
    </div>
    return (
        <>
            {JSON.stringify(translations)}
            {mode !== 'list' ? RenderBackToList : <TableComponent {...ListWithTableProps} />}
            {mode === 'create' && <CreateForm {...CreateFormProps} />}
            {mode === 'update' && <UpdateForm {...UpdateFormProps} />}
            {mode === 'view' && <ViewForm {...ViewFormProps} />}
        </>
    );
}


export default superUserTenantSomething