"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, Textarea, Box, Frame, SelectTail, CheckBox, DatePicker, Line } from "@/Theme/Midone/Forms";
import { CKEditor } from "@/Theme/Midone/Forms/Ckeditor";
import { Dropzone } from "@/Theme/Midone/Forms/Dropzone";

export function Form({ id , course }) {
    const { Lang,local } = useLang();
    const {laraAdmin,nextAdmin} = useConfig();
    const { componentPermission } = useAccess();
    const component = useFormRefs();
    const router = useRouter();
    const { save, get } = useData();
    const formUrl =  "/courses/"+course+"/chapters";
    // const formUrl = `/chapters`;
    const url = (id>0)? `${laraAdmin}/chapters/${id}` : `${laraAdmin}/chapters`;
    const method = id ? "edit" : "new";

    componentPermission("chapters."+method);

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

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

    return (
        <>
            <Frame title={Lang(["public.chapters"])}>
                <Box>
                    <Input className="col-span-6" refItem={[component, "title"]} required="true" />
                    <Input type="hidden" className="col-span-6" refItem={[component, "course_id"]} defaultValue={course} required="true" />
                    <Input type='number' min='1' label="order" refItem={[component, "order"]} placeholder='1' />
                                <CKEditor required="true" label="description" refItem={[component, 'description']} />
                    <CheckBox label="status" name={Lang('public.active')} refItem={[component, "status_id"]}
                        defaultValue={(component?.state?.info?.status_id != undefined)? component?.state?.info?.status_id : 1} 
                        // value={0} defaultValue={component?.state?.info?.status_id}
                    /> 
                </Box>
                <ButtonContainer className="col-span-12">
                    <Button label="save" onClick={saveItem} />
                    <Button label="back" onClick={back} />
                </ButtonContainer>
            </Frame>
        </>
    );
}