"use client";

import { useEffect, useState } 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 { SelectTail } from "@/Theme/Midone/Forms/SelectTail";
import { Dropzone } from "@/Theme/Midone/Forms/Dropzone";
import { Loading } from "@/Theme/Midone/Utils";

export default function Form({id}){
    const {activeLang,Lang,local} = useLang();
    const { laraAdmin } = useConfig();
    const formUrl = "/city";
    const laraUrl = "/cities";
    let component = useFormRefs();
    const router = useRouter();
    let {save, get, getNeedles} = useData();
    let [needles, setNeedles] = useState();
    const { componentPermission } = useAccess();

    let uploadUrl=laraAdmin+"/upload/.-media-city";
    let deleteUrl=laraAdmin+"/deleteFile/.-media-city";
    let uploadDir='media/city/';

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

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

    useEffect(() => {
        getNeedles(laraAdmin+laraUrl+'/get-needles', setNeedles);
        if(id != 0 && id != undefined) get(url, component, "info");
    }, []);

    const saveItem = ()=>save(url, component, method, formUrl);
    const back = ()=>router.back();
    
    return(
        (!needles)?
            <Frame title={Lang(["public.cities"])}>
                <div className="col-span-12 xxl:col-span-9">
                    <Loading className="mt-5" />
                </div>
            </Frame>
        :
            <>
                <Frame title={Lang(["public.cities"])}>
                    <div className="col-span-12">
                        <Tab>
                            <TabHeader>
                                {Tools.getArray(activeLang).map((lang, index)=>
                                    <TabList href={lang.symbol} title={Lang('public.city')} 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= {"name_"+lang.symbol}
                                            refItem={[component, "name_"+lang.symbol]} required="true"
                                        />
                                    </TabPanel>
                                )}
                            </TabBody>
                        </Tab>
                    </div>
                    <Box shadow={false}>
                        <SelectTail label="province" refItem={[component, "province_id"]} data={needles?.province} titleKey={"name_"+local} required="true" />
                        <Input label="order" refItem={[component, "order"]} />
                        {/* <Dropzone refItem={[component, "icon"]} uploadUrl={uploadUrl} deleteUrl={deleteUrl+"/"} uploadDir={uploadDir} /> */}
                        <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>  
            </>
    );
}