"use client";
import { useEffect, useState } from "react";
import { useLang } from "@/lib/lang";
import { useConfig } from "@/lib/config";
import { useRouter } from 'next/navigation';
import { useData, useFormRefs, Input, Button, ButtonContainer, CheckBox, SelectTail, Box, Frame, Textarea } from "@/Theme/Midone/Forms";
import { Dropzone } from "@/Theme/Midone/Forms/Dropzone";
// import { Select } from "@/Theme/Midone/Forms/Select";
import { Loading } from "@/Theme/Midone";

export function Form({ id,link="/users",titleFrame="" }) {
    const { Lang,local } = useLang();
    const { laraAdmin } = useConfig();
    let { save, get, getNeedles } = useData();
    let [needles, setNeedles] = useState();
    const router = useRouter();
    let component = useFormRefs();

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

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

    useEffect(() => {
        getNeedles(laraAdmin+'/users/get-needles', setNeedles);
        if (id != 0 && id != undefined) get(url, component, "info");
    }, []);
    const nextUrl = link == "/creator" ? "/" : link;
    console.log(nextUrl);

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

    const data = component?.state?.info;
    let roles = needles?.role;
    let nationality = needles?.country;
    let displayPass = (id>0)? "" : <Input label="password" refItem={[component, "password"]} type="password" />;
    let displayRole = "" ;
    let displayType = <>
            {/* آیا راوی است؟ */}
            <CheckBox className="col-span-12" name={Lang('public.is_it_narrator')} refItem={[component, "narrator"]} checked={data?.narrator == 1} />
            {/* آیا نویسنده است؟ */}
            <CheckBox className="col-span-12" name={Lang('public.is_it_author')} refItem={[component, "author"]} checked={data?.author == 1} />
            {/* آیا مترجم است؟ */}
            <CheckBox className="col-span-12" name={Lang('public.is_it_translator')} refItem={[component, "translator"]} checked={data?.translator == 1} />
        </>
    if(titleFrame=="personnels")
    {
        displayRole = <SelectTail label="role" refItem={[component, "role_id"]} data={roles} titleKey={"title_"+local} />;
        displayType = "";
    }
    
    return (
        <>
            {((data?.id == undefined && method=="edit" && needles == undefined) || (needles == undefined)) ?
                <Loading />
            :
                <>
                    <Frame title={Lang(["public."+titleFrame])}>
                        <Box>
                            {/* نام */}
                            <Input label="firstname" refItem={[component, "firstname"]} required="true" />

                            {/* نام خانوادگی */}
                            <Input label="lastname" refItem={[component, "lastname"]} required="true" />

                            {/* ملیت */}
                            <SelectTail className={displayPass ? "col-span-4" : "col-span-6"} label="nationality" refItem={[component, "nationality_id"]} data={nationality} titleKey={"nationality_"+local} />

                            {/* تاریخ تولد */}
                            <Input  className={displayPass ? "col-span-4" : "col-span-6"} label="birth_date" refItem={[component, "birth_date"]} />

                            {/* تاریخ درگذشت */}
                            <Input className={displayPass ? "col-span-4" : "col-span-6"} label="death_date" refItem={[component, "death_date"]} />
                            {/* شماره همراه */}
                            <Input label="mobile" refItem={[component, "mobile"]} required="true" />

                            {/* رمز عبور */}
                            {displayPass}

                            {/* نقش کاربر */}
                            {displayRole}

                            {/* زندگی‌نامه */}
                            <Textarea label="biography" refItem={[component, "biography"]} />

                                {/* تصویر */}
                            <Dropzone refItem={[component, "photo"]} uploadUrl={uploadUrl} deleteUrl={deleteUrl+"/"} uploadDir1={uploadDir} required="true" />
                            
                                {displayType}
                                {/* وضعیت فعال/غیرفعال */}
                                <CheckBox
                                    label="status"
                                    name={Lang('public.active')}
                                    refItem={[component, "status_id"]}
                                    checked={data?.status_id == 1}
                                />
                            
                        </Box>
                    </Frame>
                </>
            }
            <ButtonContainer>
                <Button label="save" onClick={saveItem} component={component} />
                <Button label="back" onClick={back} />
            </ButtonContainer>
        </>
    );
}