"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("events.index");
    const formUrl =  nextAdmin+ "/events";
    let [url, setUrl] = useState(laraAdmin+"/events");
    let roles = [ {"id":"0","title":"همه"},{"id":"1","title":"استاد"},{"id":"2","title":"دانشجو"},{"id":"3","title":"استادیار"},{"id":"4","title":"مدیریت"}, ]
    const badge = ['bg-blue-100 w-14 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300',]

    let info = {
        insertLink:  checkPermission("events.store")&& formUrl + "/new",
        url: url,
        columns: [
            {label: "",jsx: (item) => (<Pic src={ mediaPath + "/event/" + item?.image} defaultImg={`${mediaPath}/public/default/avatar.png`} key={"img" + item?.photo}
                classImg="user-avatar" /> ),
            },
            {label: "title", jsx: (item)=>
                <span>
                    <Link href={formUrl+"/"+item?.id}>{item?.title}</Link>
                    <div className={badge[0]}>{item?.category?.["title_"+local]}</div>
                </span>
            },
            { label: "publication_date", field: "publication_date" },
            { label: "publication_end_date", field: "publication_end_date" },
            {label: "albel_event_for_users", jsx: (item) =><span>{roles?.find((role)=>role?.id==item?.for_users)?.title}</span>},
            // {label: "albel_event_for_users", jsx: (item) =><span>{Tools?.EventFor(item?.for_users)}</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="events.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="events.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>
    );
}