"use client";

import { useEffect, useState } from "react";
import { useLang } from "@/lib/lang";
import { useAccess } from "@/lib/access";
import { useData,useFormRefs,Input,Button,ButtonContainer,CheckBox, Frame, DatePicker, Line } from "@/Theme/Midone/Forms";
import { Dropzone } from "@/Theme/Midone/Forms/Dropzone";
import { CKEditor } from "@/Theme/Midone/Forms/Ckeditor";
import { SelectTail } from "@/Theme/Midone/Forms/SelectTail";
import { Repeat } from "@/Theme/Midone/Utils/Repeat";
import { useRouter } from 'next/navigation';
import { Tools } from "@/Theme/Midone/Utils/Tools";
import { Tab,TabHeader,TabBody,TabList,TabPanel } from "@/Theme/Midone/Forms/Tab";
import { useSearchParams } from "next/navigation";
import { CourseRepeat } from "@/Components/Packages/CourseRepeat";
import { Loading } from "@/Theme/Midone/Utils";

export function Form({ id,laraPath,nextPath="" }){
    const {Lang,local,dir} = useLang();
    const router = useRouter();
    const { componentPermission } = useAccess();
    const formUrl = "/packages" ; 
    let component = useFormRefs();
    let {save, get, getNeedles} = useData();
    let [needles, setNeedles] = useState();

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

    componentPermission(`packages.${method}`);
    
    let uploadUrl=laraPath+"/upload/.-media-packages";
    let deleteUrl=laraPath+"/deleteFile/.-media-packages";
    let uploadDir='media/packages/';
    let type = useSearchParams().get('type');
    let urlSave = (type!=null)? url+"?type="+type: url;

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

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

    let publishStatus = needles?.status?.filter((status)=>status.group_id==36);
    let info = component?.state?.info;
    let faqs = info?.faqs;
    let faqsList = [];
    if(faqs != undefined && faqs != null)
    {
        faqs?.map((item)=> { faqsList.push(item.id); });
    }

    // فیلدهای مشترک
    // title
    // description
    // thumbnail
    // system_id ----- دیفالت
    // creator_id -----لاراول
    // editor_id -----لاراول

    // فیلدهای اختصاصی دوره
    // summary
    // register_limit_date
    // main_price
    // price
    // type_id -----لاراول
    // category_id
    // level_id
    // method_id -----لاراول
    // publish_id
    // seo_title
    // seo_description
    
    // فیلدهای اختصاصی درس
    // code 
    // category_id -----لاراول
    
    // فیلدهای اختصاصی ارائه
    // code  -----لاراول
    // less_id  -----لاراول
    // group  -----لاراول
    // teacher_person_id -----لاراول
    // package_id -----لاراول
    // system_id -----لاراول
    // start_date -----لاراول
    // end_date -----لاراول
    // creator_id -----لاراول
    // editor_id -----لاراول

    // فیلدهای اختصاصی رجیستر در جدول course_user
    // user_id
    // code
    // group
    // start_date
    // end_date
    // course_presented
    // role_id
    // system_id
    // title
    // less_id


    // package_faq یک تب جدا
    // package_keyword  این در تب سئو
    
    return(
        ((needles == undefined) || (method == "edit" && !info?.id))?
            <Frame>
                <div className="col-span-12 xxl:col-span-9">
                    <Loading className="mt-5" />
                </div>
            </Frame>
        :
            <>
                <Frame>
                    <Tab className="col-span-12">
                        <TabHeader>
                            <TabList href="tab-first" title={Lang('public.tab_form_package_info')} active={"true"}>{Lang("public.tab_form_package_info")}</TabList>
                            <TabList href="tab-second" title={Lang('public.tab_form_package_complete')}>{Lang("public.tab_form_package_complete")}</TabList>
                            <TabList href="tab-third" title={Lang('public.tab_form_package_faq')}>{Lang("public.tab_form_package_faq")}</TabList>
                            <TabList href="tab-fourth" title={Lang('public.tab_form_package_seo')}>{Lang("public.tab_form_package_seo")}</TabList>
                        </TabHeader>
                        <TabBody>
                            <TabPanel id="tab-first" active={"true"}>
                                <Input label="title" refItem={[component, "title"]} required="true" />
                                {info?.type_id==1 && <CheckBox className="col-span-4" label="apply_changes_for_course" name={Lang('public.apply_changes_for_course')} refItem={[component, "need_to_apply"]} />}
                                <Line />
                                <Input label="main_price" refItem={[component, "main_price"]} dir="ltr" type="price" 
                                defaultValue={info? info?.main_price : 0}
                                />
                                <Input label="price" refItem={[component, "price"]} dir="ltr" type="price" />
                                <SelectTail label="category" refItem={[component, "category_id"]} data={needles?.category} titleKey={"title_"+local} required="true" />
                                <SelectTail label="level" refItem={[component, "level_id"]} data={needles?.level} titleKey={"title_"+local} required="true" />
                                <SelectTail label="publish_status" refItem={[component, "publish_id"]} data={publishStatus} titleKey={"title_"+local} valueKey="code" required="true" />
                                <DatePicker dir="ltr" label="register_limit_date" refItem={[component, "register_limit_date"]} />                        
                                {(type=="oneCourse" || info?.type_id==1)?
                                    <>
                                        <SelectTail label="teacher" refItem={[component, "teacher_person_id"]} required="true"
                                            defaultValue={info&& info?.presenteds?.[0]?.teacher_person_id}
                                        >
                                            {needles?.teacher.map((teacher, index)=>
                                                    <option key={index} value={teacher.id}> {teacher.firstname} {teacher.lastname} </option>
                                                )}
                                        </SelectTail>
                                        <Input label="code" refItem={[component, "code"]} defaultValue={info&& info?.presenteds?.[0]?.code} required="true" disabled={method == "edit"} />
                                    </>
                                :
                                    <Repeat count_data={info? info?.presenteds?.length : 1} child={CourseRepeat} parent={component} needles={needles} />
                                    // <SelectTail label="courses" refItem={[component, "course_id"]} data={needles?.course} multiple={true} required="true" />
                                }
                            </TabPanel>
                            <TabPanel id="tab-second">
                                <CKEditor className="col-span-6" refItem={[component, "summary"]} required="true" />
                                <CKEditor className="col-span-6" refItem={[component, "description"]} required="true" />
                                <Dropzone className="col-span-6" refItem={[component, "thumbnail"]} uploadUrl={uploadUrl} deleteUrl={deleteUrl+"/"} uploadDir={uploadDir} required="true" />
                                <Dropzone className="col-span-6" refItem={[component, "video"]} uploadUrl={uploadUrl+"-video"} deleteUrl={deleteUrl+"-video/"} uploadDir={uploadDir+"-video"} />
                            </TabPanel>
                            <TabPanel id="tab-third">
                                {needles?.faq?.map((faq, index)=>
                                    {   
                                        return(
                                            <div className="col-span-12" key={index}>
                                                <div className="grid grid-cols-12 mb-3">
                                                    <CheckBox label=" " name={Lang('public.select_faq')} refItem={[component, "faq_id_"+faq?.id]}
                                                        value={1} defaultValue={Tools?.inArray(faq["id"], faqsList)? 1 : 0}
                                                    />
                                                    <span className="mt-5 me-3">{faq?.category?.["title_"+local]}</span>
                                                </div>
                                                <p className="mb-2">{faq?.question}</p>
                                                <p>{faq?.answer}</p>
                                            </div>
                                        );
                                    })
                                }
                            </TabPanel>
                            <TabPanel id="tab-fourth">
                                <Input className="col-span-6"label="seo_title" refItem={[component, "seo_title"]} />
                                <SelectTail className="col-span-12" label="keywords" refItem={[component, "keyword_id"]}
                                    defaultValue={info?.keywords} data={needles?.keyword} multiple={true} />
                                <CKEditor refItem={[component, "seo_description"]} />
                            </TabPanel>
                        </TabBody>
                    </Tab>
                </Frame>
                <ButtonContainer>
                    <Button label="save" onClick={saveItem} />
                    <Button label="back" onClick={back} />
                </ButtonContainer>
            </>
    );
}