"use client";

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

export default function Form({ id }){
    const { componentPermission } = useAccess();

    const {activeLang,Lang,local} = useLang();
    const { laraAdmin } = useConfig();
    let component = useFormRefs();
    const router = useRouter();
    let { save, get } = useData();
    const formUrl = "/ticketSubjects"; 
    const laravelUrl = "/ticket-subjects"; 

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

    componentPermission("ticketSubjects."+method);


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

    const saveItem = ()=>save(url, component, method, formUrl);
    const back = ()=>router.back();

    return(
        <>
            <Frame title={Lang(["public.ticket_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}>
                    <CheckBox className="col-span-6" label="status" name={Lang('public.active')} refItem={[component, "status_id"]} />
                </Box>
            </Frame>
            <ButtonContainer>
                <Button label="save" onClick={saveItem} component={component} />
                <Button label="back" onClick={back} />
            </ButtonContainer>
        </>
    );
}