"use client";
import { useLang } from "@/lib/lang";
import { useConfig } from "@/lib/config";
import { useAccess } from "@/lib/access";
import { useUtility } from "@/lib";
import { useEffect, useRef, useState, useCallback, useMemo } from "react";
import { usePathname, useRouter } from "next/navigation";
import Link from "next/link";
import { Box, Button, ButtonContainer, Select } from "@/Theme/Midone/Forms";
import { Grid, Frame, useData, Pic, FeatherIcon, Tools } from "@/Theme/Midone/Utils";
// import { EventFor } from "@/Components/Public/EventFor";

export function List() {
    const { Lang, local } = useLang();
    const { laraAdmin,nextAdmin,mediaPath } = useConfig();
    const { destroy } = useData();
    const { componentPermission,checkPermission } = useAccess();
    const formUrl = nextAdmin+ "/packageCategory";
    const laraUrl = "/package-categories";
    
    componentPermission("packageCategory.index");

    let info = {
        insertLink: checkPermission("packageCategory.store")&& formUrl + "/new",
        url: laraAdmin+laraUrl,
        columns: [
            {label: "title", jsx: (item)=><span>{<Link href={formUrl+"/"+item?.id}>{item?.["title_"+local]}</Link> }</span>},
            { label: "status", jsx: (item) => <span className={`text-${item?.active_status?.color}`}>{item?.active_status?.[`title_${local}`]}</span> },
            {
                label: "",
                sort: false,
                width: "110px",
                jsx: (item) => <>
                    <div className='flex justify-center '>
                        <FeatherIcon name="Edit" url={formUrl + "/" + item?.id + "/edit"} tooltip={Lang('public.edit')} />
                        {/* <FeatherIcon name="Eye" url={formUrl+"/"+item?.id} tooltip={Lang('public.view')} /> */}
                        {item?.count_view >0 ? "" : <FeatherIcon name="XOctagon" permission="eventCategory.destroy" tooltip={Lang('public.delete')} color="darkred" onClick={() => destroy(laraAdmin+"/events/" + item?.id)} />}
                    </div>
                </>
            },
        ],
    }

    return (
        <Frame title={Lang(["public.category"])}>
            <div className="intro-y col-span-12">
                <Grid {...info} key={"table key"} />
            </div>
        </Frame>
    );
}