"use client";
import { useEffect, useState } from "react";
import { useLang } from "@/lib/lang";
import { useConfig } from "@/lib";
import { useAccess } from "@/lib/access";
import { usePathname, useRouter } from 'next/navigation';
import { useData, useFormRefs, SelectTail, Input, Button, ButtonContainer, Frame, Box, CheckBox, TimePicker, DatePicker } from "@/Theme/Midone/Forms";
import { CKEditor } from "@/Theme/Midone/Forms/Ckeditor";
import { Repeat } from "@/Theme/Midone/Utils/Repeat";
import {Question} from "../Public/Question/Question";
import { YearGroup } from "../Public/YearGroup";
import { Dropzone } from "@/Theme/Midone/Forms/Dropzone";
import Link from "next/link";

export function Form({ laraPath, id, course, nextPath="" }) {
        const { Lang,local } = useLang();
        const { mediaPath } = useConfig();
        const component = useFormRefs();
        const router = useRouter();
        const { componentPermission } = useAccess();
        let { save, get, getNeedles } = useData();
        let [needles, setNeedles] = useState();
        let [displayUploader, setDisplayUploader] = useState();
        let formUrl = "/quiz";
        let url = laraPath+formUrl, method = "new";
        if (id != 0 && id != undefined) url = laraPath+formUrl + "/" + id, method = "edit";
        componentPermission(`quiz.${method}`);
        // console.log("course is:", course);
        const menuPath = usePathname().split('/').includes('myCourses') ? 'myCourses' : 'courses';

        let uploadUrl = laraPath+"/upload/.-media-quiz";
        let deleteUrl = laraPath+"/deleteFile/.-media-quiz";
        let uploadDir = 'media/quiz/';
        // let fileReply = quizInfo?.data?.file;

        let currentYear = needles?.yearsemester?.find(item => item.current == 1);
        let importExcelForQuestion = currentYear?.import_excel_for_question;
        useEffect(() => {
                getNeedles(laraPath+formUrl + '/get-needles', setNeedles);
                if (id != 0 && id != undefined)
                {
                        get(url, component, "info");
                        setDisplayUploader(0);
                }
                else setDisplayUploader(1);
        }, []);
        useEffect(() => {
                if (method == "new") setDisplayUploader(importExcelForQuestion);
        }, [needles]);

        const saveItem = () => save(url, component, method, nextPath+"/"+menuPath+"/"+course+"/tools/quiz"+"?"+Math.random());
        const back = () => router.back();

        let data = component?.state?.info;
        let start_date_quiz ="";
        let end_date_quiz ="";
        let start_time_quiz ="";
        let end_time_quiz ="";
        let default_title_quiz ="";
        if(id){
             start_date_quiz=data?.start_date;
             end_date_quiz=data?.end_date;
             start_time_quiz=data?.start_time;
             end_time_quiz=data?.end_time;
             default_title_quiz=data?.title;
        }else{
             start_date_quiz=currentYear?.start_date_quiz;
             end_date_quiz=currentYear?.end_date_quiz;
             start_time_quiz=currentYear?.start_time_quiz;
             end_time_quiz=currentYear?.end_time_quiz;
             default_title_quiz=currentYear?.default_title_quiz;
        }

        const changeMethod = (e) => { setDisplayUploader(e); }
        
        return <>
                <Frame title={Lang(["public.quiz"])}>
                        <Box shadow="false">
                                <Input type="hidden" defaultValue={course} refItem={[component, "course_id"]} />
                                <Input label="title" defaultValue={default_title_quiz} className="col-span-12" refItem={[component, "title"]} required="true" />
                                <CKEditor label="description" refItem={[component, "description"]} />
                                <YearGroup component={component} needles={needles}  />
                                <DatePicker label="start_date" defaultValue={start_date_quiz} refItem={[component, "start_date"]} required="true" />
                                <Input type="time" label="start_time" defaultValue={start_time_quiz} refItem={[component,"start_time"]} required="true" placeholder={"01:00"}/>
                                <DatePicker label="end_date" defaultValue={end_date_quiz} refItem={[component, "end_date"]} required="true" position="right-top" />
                                <Input type="time" label="end_time" defaultValue={end_time_quiz} refItem={[component,"end_time"]} required="true" placeholder={"23:59"}/>
                                <Input label="limit_time" refItem={[component, "limit_time"]} />
                                <div className="col-span-12">
                                        <div className="grid grid-cols-12">
                                                <div className="col-span-12 sm:col-span-6">
                                                        <CheckBox className="" label="status" name={Lang('public.active')} refItem={[component, "status_id"]} defaultValue="1" />
                                                        <CheckBox className="" label="one_page" name={Lang('public.one_page')} refItem={[component, "one_page"]} />
                                                        {!data?.id &&
                                                                <CheckBox className="" label="insert_excel" name={Lang('public.insert_excel')} defaultValue={displayUploader} onChange={ (e)=>changeMethod(e) } />
                                                        }
                                                </div>
                                                <div className="col-span-12 sm:col-span-6">
                                                        <CheckBox className="" label="randomize_order_question" name={Lang('public.randomize')} refItem={[component, "randomize"]} />
                                                        <CheckBox className="" label="use_editor_reply" name={Lang('public.use_editor')} refItem={[component, "use_editor"]} />
                                                        <CheckBox className="" label="use_uploader_reply" name={Lang('public.use_uploader')} refItem={[component, "use_uploader"]} />
                                                </div>
                                        </div>
                                </div>
                        </Box>
                        {displayUploader == 1?
                                <Box cols="grid-cols-1" title={Lang("public.upload_file")}>
                                        <Dropzone refItem={[component, "file_question"]} 
                                                // defaultValue={fileReply}
                                                uploadUrl={uploadUrl} deleteUrl={deleteUrl+"/"} uploadDir={uploadDir} maxFiles="1"
                                                help = {Lang("public.accept_format")+": png,jpg,jpeg,WebP,AVIF,jfif"}
                                                // acceptType="png,jpg,jpeg"
                                                // acceptType="pdf,doc,docx,ppt"
                                                maxFilesize = "2"
                                        />
                                        <div>
                                                <Link className="btn btn-primary mr-1 ml-1" target="_blanket" href={`${mediaPath}/public/example_descriptive_${local}.xlsx`}>{Lang(["public.example_excel_descriptive"])}</Link>
                                                <Link className="btn btn-primary mr-1 ml-1" target="_blanket" href={`${mediaPath}/public/example_multiplechoice_${local}.xlsx`}>{Lang(["public.example_excel_multiplechoice"])}</Link>
                                        </div>
                                </Box>
                        :
                                <Repeat count_data={component?.state?.info? component?.state?.info?.questions?.length : 1} child={Question} parent={component} needles={needles?.questiontype} />
                        }
                </Frame>
                <ButtonContainer>
                        <Button label="save" onClick={saveItem} />
                        <Button label="back" onClick={back} />
                </ButtonContainer>
        </>;
}