"use client";

import { useLang } from "@/lib/lang";
import { useConfig } from "@/lib/config";
import { useAccess } from "@/lib/access";
import { useRouter } from 'next/navigation';
import { useFormRefs, Input, Button, ButtonContainer, Frame, SelectTail, CheckBox, DatePicker, useData } from "@/Theme/Midone/Forms";
import { CKEditor } from "@/Theme/Midone/Forms/Ckeditor";
import { Dropzone } from "@/Theme/Midone/Forms/Dropzone";
import { Select } from "@/Theme/Midone/Forms/Select";

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

    componentPermission("events." + method);

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



    const saveItem = () => {
        console.log(url);

        const saveUrl = `${formUrl}`;
        console.log(component);
        
        save(url, component, method, saveUrl);
    };
    const back = () => router.back();

    return (
        <>
            <Frame title={Lang(["public.event"])}>
                <div className="col-span-12 intro-y grid grid-cols-12 gap-5 mt-5">
                    <div className="intro-y col-span-12 lg:col-span-8 box p-4">
                        <Input className="col-span-12" refItem={[component, "name"]} required="true" />
                        <div className="intro-y mt-5 col-span-12 gap-4 grid grid-cols-12 ">
                            <Select className="col-span-6" label="default_discount_type" refItem={[component, "default_discount_type"]}
                                defaultValue={(component?.state?.info?.default_discount_type) ? component?.state?.info?.default_discount_type : ""}
                                data={[{id: 'fixed', label: 'به صورت مقدار ثابت'}, {id: 'percentage', label: 'به صورت درصدی'}]} titleKey={"label"} />
                            <Input className="col-span-6" refItem={[component, "default_discount_value"]} />
                        </div>
                        <div className="intro-y 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="start_date" refItem={[component, "start_date"]} required />
                            <DatePicker label="end_date" refItem={[component, "end_date"]} required />
                            <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>
        </>
    );
}