"use client";

import { useEffect,useState } from "react";
import { useLang } from "@/lib/lang";
import { useConfig } from '@/lib/config';
import { useRouter } from 'next/navigation';
import { useAccess } from "@/lib/access";
import { useUtility } from "@/lib/utility";
import { Loading } from "@/Theme/Midone/Utils";
import { useData,useFormRefs,Button,Frame } from "@/Theme/Midone/Forms";
import { Images,Videos,Documents,WaitingComments,InfoComplete,Info,InfoSide  } from '@/Components/Blog/Details';

export default function View({ id }){
    const {Lang,local} = useLang();
    const {laraAdmin,nextAdmin,mediaPath} = useConfig();
    let component = useFormRefs();
    const router = useRouter();
    let { get } = useData();
    const { componentPermission,checkPermission } = useAccess();
    let [infoServer, setInfoServer] = useState(1);
    const formUrl = "/blogs"; 
    let url = laraAdmin+formUrl+"/show-info/"+id;
    // if(id != 0 && id != undefined) url = url;

    componentPermission(`blogs.showInfo`);

    useEffect(() => {
        get(url, component, "info");
    }, [infoServer]);
    
    const { getField } = useUtility();
    const back = ()=>router.back();

    const changeCalss = (idTab)=>{
        window?.$(".classTab").removeClass("bg-theme-17 text-white");
        window?.$(`#${idTab}-tab`).addClass("bg-theme-17 text-white");
    };
    let data = component?.state?.info;
    let access = data?.access;
    let item = data?.item;
    let creator = data?.creator;
    let editor = data?.editor;
    let images = (data?.item?.img)? data?.item?.img?.split("###") : [];
    let videos = (data?.item?.video)? data?.item?.video?.split("###") : [];
    let documents = (data?.item?.document)? data?.item?.document?.split("###") : [];
    let keywords = (data?.keywords)? data?.keywords : [];
    let comments = (data?.comments)? data?.comments : [];
    let waitingComments = (data?.waiting_comments)? data?.waiting_comments : [];

    let urlEdit = `${nextAdmin+formUrl}/${item?.id}/edit`;

    const headerTabs = [
        {"tabInfo":"info",            "tabTitle":"view_info",          "tabSelected":true},
        {"tabInfo":"infoDescription", "tabTitle":"description",        "tabSelected":false},
        {"tabInfo":"image",           "tabTitle":"image",              "tabSelected":false},
        {"tabInfo":"video",           "tabTitle":"videos",             "tabSelected":false},
        {"tabInfo":"document",        "tabTitle":"documents",          "tabSelected":false},
        {"tabInfo":"waitingComments", "tabTitle":"not_check_comments", "tabSelected":false},
    ];
    const listTabs = [
        {"tabInfo":"info",            "displayInfo":item,            "tagInfo":Info,            "classInfo":"", "arrayInfo": false, "access":true},
        {"tabInfo":"infoDescription", "displayInfo":item,            "tagInfo":InfoComplete,    "classInfo":"", "arrayInfo": false, "access":true},
        {"tabInfo":"image",           "displayInfo":images,          "tagInfo":Images,          "classInfo":"", "arrayInfo": true,  "access":true},
        {"tabInfo":"video",           "displayInfo":videos,          "tagInfo":Videos,          "classInfo":"", "arrayInfo": true,  "access":true},
        {"tabInfo":"document",        "displayInfo":documents,       "tagInfo":Documents,       "classInfo":"", "arrayInfo": true,  "access":true},
        {"tabInfo":"waitingComments", "displayInfo":waitingComments, "tagInfo":WaitingComments, "classInfo":"", "arrayInfo": true,  "access":access},
    ];
        
    return(
        <>
            <Frame title={Lang("blogs")} key={infoServer}>
                {(Object.keys(data)?.length == 0)?
                    <Loading  />
                :
                    <>
                        <div className="col-span-12 lg:col-span-3 xxl:col-span-2">
                            <div className="intro-y box p-5 mt-6 overflow-hidden">
                                <div className="mt-1 post__tabs">
                                    {headerTabs?.map((tab, i)=>
                                    {
                                        let classNameTab = i==0? "font-medium bg-theme-17 text-white active" : "mt-2";
                                        return(
                                            <a href="#wrapper " data-toggle="tab" data-target={"#"+tab?.["tabInfo"]}
                                                id={tab?.["tabInfo"]+"-tab"} role="tab" aria-controls={tab?.["tabInfo"]} aria-selected={tab?.["tabSelected"]}
                                                className={"flex items-center px-3 py-2 rounded-md classTab "+classNameTab} onClick={()=>changeCalss(tab?.["tabInfo"])}
                                            >
                                                <i className="w-4 h-4 ml-2" data-feather={tab?.["tabInfo"]}></i>{Lang("public."+tab?.["tabTitle"])}
                                            </a>
                                            );
                                        })
                                    }
                                    {/* <a href="#wrapper " data-toggle="tab" data-target="#info" id="info-tab" role="tab" aria-controls="info" aria-selected="true"
                                        className="flex items-center px-3 py-2 rounded-md font-medium bg-theme-17 text-white active classTab" onClick={()=>changeCalss("info")}>
                                            <i className="w-4 h-4 ml-2" data-feather="info"></i>{Lang("public.view_info")}
                                    </a>
                                    <a href="#wrapper " data-toggle="tab" data-target="#image" id="image-tab" role="tab" aria-controls="image" aria-selected="false"
                                        className="flex items-center px-3 py-2 mt-2 rounded-md classTab" onClick={()=>changeCalss("image")}>
                                            <i className="w-4 h-4 ml-2" data-feather="image"></i>{Lang("public.images")}
                                    </a>
                                    <a href="#wrapper " data-toggle="tab" data-target="#video" id="video-tab" role="tab" aria-selected="false"
                                        className="flex items-center px-3 py-2 mt-2 rounded-md classTab" onClick={()=>changeCalss("video")}>
                                            <i className="w-4 h-4 ml-2" data-feather="video"></i>{Lang("public.videos")}
                                    </a>
                                    <a href="#wrapper " data-toggle="tab" data-target="#document" id="document-tab" role="tab" aria-selected="false"
                                        className="flex items-center px-3 py-2 mt-2 rounded-md classTab" onClick={()=>changeCalss("document")}>
                                            <i className="w-4 h-4 ml-2" data-feather="document"></i>{Lang("public.documents")}
                                    </a>
                                    {access?
                                        <a href="#wrapper " data-toggle="tab" data-target="#waitingComments" id="waitingComments-tab" role="tab" aria-selected="false"
                                        className="flex items-center px-3 py-2 mt-2 rounded-md classTab" onClick={()=>changeCalss("waitingComments")}>
                                            <i className="w-4 h-4 ml-2" data-feather="waitingComments"></i>{Lang("public.not_check_comments")}
                                    </a>
                                    : ""} */}
                                </div>
                            </div>
                            <InfoSide item={item} Lang={Lang} local={local} urlEdit={urlEdit} back={back} checkPermission={checkPermission} getField={getField} />
                        </div>
                        <div className="col-span-12 lg:col-span-9 xxl:col-span-10 ">
                            <div className="post__content tab-content">
                                {listTabs?.map((tab, i)=>
                                {
                                    let classNameTab = i==0? "p-5 active" : "";
                                    let Com = tab?.["tagInfo"];
                                    return(
                                        <div id={tab?.["tabInfo"]} className={"tab-pane "+classNameTab+tab?.classInfo} role="tabpanel" aria-labelledby={tab?.["tabInfo"]+"-tab"} key={i} >
                                            {(tab?.arrayInfo == true && tab?.displayInfo?.length == 0)?
                                                <div className="intro-y grid grid-cols-12 gap-3 sm:gap-6 mt-6">
                                                    <div className="intro-y col-span-12 sm:col-span-12 md:col-span-12 xxl:col-span-12 mt-5">
                                                        <div className="alert alert-warning-soft show flex items-center mb-2 text-center">{Lang("public.no_data")}</div>
                                                    </div>
                                                </div>
                                            :
                                                <Com 
                                                    access={access} itemInfo={item} comments={comments} creator={creator} editor={editor} laraAdmin={laraAdmin} local={local} keyServer={setInfoServer}
                                                    itemComplete={item} getField={getField}
                                                    keywords={keywords} 
                                                    images={images} 
                                                    videos={videos} 
                                                    documents={documents} 
                                                    waitingComments={waitingComments} nextAdmin={nextAdmin}  
                                                    mediaPath={mediaPath} Lang={Lang}
                                                />
                                            }
                                        </div>
                                    );
                                })}
                            </div>
                        </div>
                    </>
                }
            </Frame>
        </>
    );
}