"use client";
import { useEffect } from "react";
import { useLang } from "@/lib/lang";
import { useConfig } from "@/lib/config";
import { useAccess } from "@/lib/access";
import { useRouter } from 'next/navigation';
import { useData,useFormRefs,Input,Button,ButtonContainer,Box,Frame,CheckBox } from "@/Theme/Midone/Forms";
import { Tab,TabHeader,TabBody,TabList,TabPanel } from "@/Theme/Midone/Forms/Tab";
import { Tools } from "@/Theme/Midone/Utils/Tools";
import { Dropzone } from "@/Theme/Midone/Forms/Dropzone";
import { Loading } from "@/Theme/Midone/Utils";

export default function Form({id}){
    const {activeLang,Lang} = useLang();
    const {laraAdmin } = useConfig();
    const formUrl = "/blogSubjects";
    const laraUrl = "/blog-subjects";
    let component = useFormRefs();
    const router = useRouter();
    let {save, get} = useData();
    const { componentPermission } = useAccess();
    let uploadUrl=laraAdmin+"/upload/.-media-blogSubjects";
    let deleteUrl=laraAdmin+"/deleteFile/.-media-blogSubjects";
    let uploadDir='media/blogSubjects/';

    let url = laraAdmin+laraUrl, method = "new";
    if(id != 0 && id != undefined) url = laraAdmin+laraUrl+"/"+id, method = "edit";

    componentPermission(`blogSubject.${method}`);

    useEffect(() => {
        if(id != 0 && id != undefined) get(url, component, "info");
    }, []);

    const saveItem = ()=>save(url, component, method, formUrl);
    const back = ()=>router.back();
    
    return(
        // (method=="edit" && !component?.state?.info?.id)?
        //     <Frame title={Lang(["public.blog_subjects"])}>
        //         <div className="col-span-12 xxl:col-span-9">
        //             <Loading className="mt-5" />
        //         </div>
        //     </Frame>
        // :
            <>
                <Frame title={Lang(["public.blog_subjects"])}>
                    <div className="col-span-12">
                        <Tab>
                            <TabHeader>
                                {Tools.getArray(activeLang).map((lang, index)=>
                                    <TabList href={lang.symbol} title={Lang('public.subject')} active={index==0?"true":""} key={index} >{lang.title}</TabList>
                                )}
                            </TabHeader>
                            <TabBody>
                                {Tools.getArray(activeLang).map((lang, index)=>
                                    <TabPanel id={lang.symbol} active={index==0?"true":""}>
                                        <Input className={"col-span-6 "+lang.dir} labelClassName={lang.dir} label= {"title_"+lang.symbol}
                                            refItem={[component, "title_"+lang.symbol]} required="true"
                                        />
                                    </TabPanel>
                                )}
                            </TabBody>
                        </Tab>
                    </div>
                    <Box shadow={false}>
                        <Dropzone refItem={[component, "image"]} uploadUrl={uploadUrl} deleteUrl={deleteUrl+"/"} uploadDir={uploadDir} />
                        <Input label="order" refItem={[component, "order"]} />
                        <CheckBox label="active" name={Lang('public.active')} refItem={[component, "status_id"]} />
                    </Box>
                </Frame>
                <ButtonContainer>
                    <Button label="save" onClick={saveItem} />
                    <Button label="back" onClick={back} />
                </ButtonContainer>  
            </>
    );
}