"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();
    componentPermission("eventCategory.index");
    const formUrl =  nextAdmin+ "/eventCategory";
    let [url, setUrl] = useState(laraAdmin+"/event-categories");

    let info = {
        insertLink: checkPermission("eventCategory.store")&& formUrl + "/new",
        url: url,
        columns: [
            {label: "title", jsx: (item)=><span>{<Link href={formUrl+"/"+item?.id}>{item?.["title_"+local]}</Link> }</span>},
            {label: "status",  jsx: (item)=><span className={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" permission="eventCategory.update" 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.event"])}>
            <div className="intro-y col-span-12">
                <Grid {...info} key={"table key"} />
            </div>
        </Frame>
    );
}