"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 }) {
    const { Lang,local } = useLang();
    const {laraAdmin,nextAdmin} = useConfig();
    const { componentPermission } = useAccess();
    const component = useFormRefs();
    const router = useRouter();
    const { save, get, getNeedles } = useData();
    const [needles, setNeedles] = useState();
    const formUrl = `/events`;
    const url = (id>0)? `${laraAdmin}${formUrl}/${id}` : `${laraAdmin}${formUrl}`;
    const method = id ? "edit" : "new";

    componentPermission("events."+method);

    let uploadUrl=laraAdmin+"/upload/.-media-event";
    let deleteUrl=laraAdmin+"/deleteFile/.-media-event";

    useEffect(() => {
        getNeedles(`${laraAdmin}${formUrl}/get-needles`, setNeedles);
        if (id) get(url, component, "info");
    }, []);

    const saveItem = () => {
        const saveUrl = `${formUrl}`;
        save(url, component, method, saveUrl);
    };
    const back = () => router.back();
    let data = component?.state?.info;
    let filterRoles = needles?.role;
    let eventCategory = needles?.eventcategory;

    return (
        <>
            <Frame title={Lang(["public.event"])}>
                <div className="col-span-12 pos intro-y grid grid-cols-12 gap-5 mt-5">
                    <div className="intro-y col-span-12 lg:col-span-8">
                        <Input className="col-span-12" refItem={[component, "title"]} required="true" />
                        <div className="post intro-y p-3 box mt-5 ">
                            <CKEditor required="true" refItem={[component, "description"]} />                            
                        </div>
                    </div>
                    <div className="col-span-12 lg:col-span-4">
                        <div className="intro-y box p-5">
                            <DatePicker label="publication_date" refItem={[component, "publication_date"]}/>
                            <DatePicker label="publication_end_date" refItem={[component, "publication_end_date"]}/>
                            <SelectTail label="category" refItem={[component, "category_id"]} defaultValue={data?.category_id} required="true" >
                                {eventCategory?.map((category, index)=>{
                                        return(
                                            <option key={index} value={category?.id}> {category?.["title_"+local]} </option>
                                        );
                                    })
                                }
                            </SelectTail>
                            <SelectTail label="albel_event_for_users" refItem={[component, "for_users"]} defaultValue={(data?.id>0)? data?.for_users : 0} required="true" >
                                <option key={0} value={0}> {Lang("public.all")} </option>
                                {filterRoles?.map((role, index)=>{
                                        return(
                                            <option key={index} value={role?.id}> {(role?.id==4)? Lang("public.management") : role?.["title_"+local]} </option>
                                        );
                                    })
                                }
                            </SelectTail>
                            <CheckBox label="status" name={Lang('public.active')} refItem={[component, "status_id"]}
                                value={0} defaultValue={component?.state?.info?.status_id}
                            />
                        </div>
                        <div className="intro-y box p-5 mt-3">
                            <Dropzone label={Lang("public.image")} refItem={[component, "image"]} uploadUrl={uploadUrl} deleteUrl={deleteUrl+"/"} required="true" />
                        </div>
                    </div>
                </div>
                <ButtonContainer className="col-span-12">
                    <Button label="save" onClick={saveItem} />
                    <Button label="back" onClick={back} />
                </ButtonContainer>
            </Frame>
        </>
    );
}