"use client";

import { useEffect } from "react";
import { useConfig } from "@/lib/config";
import { useLang } from "@/lib/lang";
// import { useAccess } from "@/lib/access";
import { useAuth } from "@/lib/auth";
import { useData,useFormRefs,Frame,Pic,Loading } from "@/Theme/Midone/Utils";
import { Description,AdminUser,LogUser,Counter } from '@/Components/Event/Details';

// export function View({ id="2",flag }){
export function View({ id,flag }){
    const {Lang,local} = useLang();
    const {laraAdmin,nextAdmin,mediaPath} = useConfig();
    // const { componentPermission } = useAccess();
    // componentPermission("events.show");
    const component = useFormRefs();
    const { save, get } = useData();
    const { user } = useAuth({ guard: "admin" });
    const formUrl = `/events`;
    const url = `${laraAdmin}${formUrl}`;

    useEffect(() => {
        get(url+"/show-info/"+id+"?flag="+flag, component, "info");
    }, []);
    useEffect(() => {
        if(component?.state?.info?.item?.id)
        {
            if(flag) save(`${laraAdmin}${formUrl}/visit-user/${id}`, component, "edit");
        }
    }, [component?.state?.info?.item?.id]);

    let data = component?.state?.info;
    let item = data?.item;

    return(
        <Frame title={Lang(["public.event"])}>
            <div className="col-span-12">
                {(item?.id == undefined)?
                    <Loading className="mt-5" />
                :
                    (flag)?
                        <div className="">
                            <div className="intro-y col-span-8 lg:col-span-8 news xl:w-3/5 p-5 box mt-8">
                                <h2 className="intro-y font-medium text-xl sm:text-2xl">{item?.title}</h2>
                                <div className=" flex mt-3">
                                    <div className="intro-y text-gray-700 dark:text-gray-600 text-xs sm:text-sm" dir="ltr">{item?.created_at}</div>
                                    <span className="mx-1">•</span>
                                    <div className="intro-y text-theme-17 dark:text-gray-500 text-xs sm:text-sm" dir="ltr">{item?.category?.["title_"+local]}</div>
                                </div>
                                {(item?.image)?
                                    <div className="intro-y mt-6">
                                        <div className="news__preview image-fit">
                                            <Pic src={`${mediaPath}/event/${item?.image}`} defaultImg={`${mediaPath}/event/${item?.image}`} classImg="rounded-md" />
                                        </div>
                                    </div> : ""
                                }
                                <div className="mt-5"><Description data={item?.description} /></div>
                            </div>
                        </div>
                    :
                        <div className="grid grid-cols-12 gap-6 mt-5">
                            <div className="intro-y col-span-7 lg:col-span-7 news p-5 box">
                                <h2 className="intro-y font-medium text-xl sm:text-2xl">{item?.title}</h2>
                                <div className=" flex mt-3">
                                    <div className="intro-y text-gray-700 dark:text-gray-600 text-xs sm:text-sm" dir="ltr">{item?.created_at}</div>
                                    <span className="mx-1">•</span>
                                    <div className="intro-y text-theme-17 dark:text-gray-500 text-xs sm:text-sm" dir="ltr">{item?.category?.["title_"+local]}</div>
                                </div>
                                {(item?.image)?
                                    <div className="intro-y mt-6">
                                        <div className="news__preview image-fit">
                                            <Pic src={`${mediaPath}/event/${item?.image}`} defaultImg={`${mediaPath}/event/${item?.image}`} classImg="rounded-md" />
                                        </div>
                                    </div> : ""
                                }
                                <Counter countView={item?.count_view} countReceive={item?.count_receive} Lang={Lang} />
                                <Description data={item?.description} />
                                <AdminUser item={item} Lang={Lang} local={local} mediaPath={mediaPath} />
                            </div>
                            <div className="intro-y col-span-5 lg:col-span-5 box">
                                <LogUser id={item?.id} />
                            </div>
                        </div>
                    }
            </div>
        </Frame>
    );
}