"use client";
import { useEffect, useState } from "react";
import { useLang } from "@/lib/lang";
import { useConfig } from "@/lib/config";
import { useRouter } from 'next/navigation';
import { useAccess } from "@/lib/access";
import { Toast } from '@/Theme/Midone/Utils/Toast';
import { useData, useFormRefs, Input, Button, ButtonContainer, Textarea, Radio, CheckBox, SelectTail, DatePicker, Line, Box, Frame } from "@/Theme/Midone/Forms";
import { Tools } from "@/Theme/Midone/Utils/Tools";
import { Dropzone } from "@/Theme/Midone/Forms/Dropzone";
import { CheckBoxGroup } from "@/Theme/Midone/Forms/CheckBoxGroup";
import { Loading } from "@/Theme/Midone";
import { CKEditor } from "@/Theme/Midone/Forms/Ckeditor";

export function Form({ id }) {
    const { Lang, local } = useLang();
    const { laraAdmin,nextAdmin } = useConfig();
    const router = useRouter();
    let component = useFormRefs();
    let { save, get, getNeedles } = useData();
    let [needles, setNeedles] = useState();
    let [selectionType, setSelectionType] = useState();
    let [selectionCat, setSelectionCat] = useState();
    const { componentPermission } = useAccess();
    const formUrl = "/discounts";

    let url = laraAdmin + "/discounts", method = "new";
    if (id != 0 && id != undefined) url = laraAdmin + "/discounts/" + id, method = "edit";
    // componentPermission(`${accessName}.${method}`);

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

    const selectType = (e, id) => {
        // setSelectionType((open) => !open);
        const div = document.getElementById(id);
        const checkboxes = div.querySelectorAll('input[type="checkbox"]');
        console.log(e?.target?.checked);
        
        checkboxes.forEach(checkbox => {
            checkbox.checked = !e?.target?.checked;
            checkbox.click();
            // console.log("checkbox");
            // console.log(checkbox.click());
            
        });
    };
    const selectCat = (e, id) => {
        // setSelectionCat((open) => !open);
        const div = document.getElementById(id);
        const checkboxes = div.querySelectorAll('input[type="checkbox"]');
        checkboxes.forEach(checkbox => {
            checkbox.checked = !e?.target?.checked;
            checkbox.click();
        });
    };

    const saveItem = () => {
        let flagType=false;
        let flagCat=false;
        
        const typeCheckboxes = document.getElementById("type-00").querySelectorAll('input[type="checkbox"]');
        typeCheckboxes.forEach(checkbox => {
            if(checkbox.checked) flagType=true;
            
        });
        const catCheckboxes = document.getElementById("cat-00").querySelectorAll('input[type="checkbox"]');
        catCheckboxes.forEach(checkbox => {
            if(checkbox.checked) flagCat=true;
            
        });
        // console.log('flagType');
        // console.log(flagType);
        if(flagType && flagCat) save(url, component, method, formUrl);
        else Toast.warning(Lang('public.text_discount_checkBox'), Lang('public.dear_user'), 5000);
    }
    // const saveItem = () => save(url, component, method, formUrl);
    const back = () => router.back();
    const data = component?.state?.info;
    const discountTypes = data?.discount_types;
    const discountCategories = data?.discount_categories;
    const calculateType = needles?.calculatetype;
    const bookType = needles?.status;
    const categories = needles?.category;
    // console.log('selectionType');
    // console.log(selectionType);

    return (
        <>
            {(data == undefined || needles == null) ?
                <Loading />
            :
                <>
                    <Frame title={Lang(["public.discount"])}>
                        <Box>
                            <Input label="title" refItem={[component, "title"]} required="true" />
                            <Line/>
                            <DatePicker label="date_time_start" refItem={[component, "date_start"]} required="true" />
                            <Input placeholder="14:00" label="time_start" refItem={[component, "time_start"]} required="true" />
                            <DatePicker label="date_time_end" refItem={[component, "date_end"]} required="true" />
                            <Input label="time_end" placeholder="22:00" refItem={[component, "time_end"]} required="true" />
                            <Input className="col-span-4" label="discount_code" refItem={[component, "discount_code"]} required="true" />
                            <SelectTail className="col-span-4" label="discount_calculate_type" refItem={[component, "calculate_type_id"]} required="true"
                                data={calculateType} titleKey={"title_"+local} valueKey="id" />                            
                            <Input className="col-span-4" label="discount_amount" refItem={[component, "discount_amount"]} required="true" />
                            <Input type="price" className="col-span-4" label="min_cart_amount" refItem={[component, "min_cart_amount"]} />
                            <Input type="price" className="col-span-4" label="max_discount_amount" refItem={[component, "max_discount_amount"]} />
                            <Input type="number" className="col-span-4" label="number_usages_user" refItem={[component, "number_usages_user"]} defaultValue={data==undefined? 0 : data?.number_usages_user} />
                            <div className="col-span-12">
                                <h2 id="accordion-open-heading-1">
                                    <div className="flex items-center justify-between w-full p-5 font-extrabold rtl:text-right text-gray-700 bg-gray-100 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-open-body-1" aria-expanded="true" aria-controls="accordion-open-body-1">
                                        <input type="checkbox" onChange={(e)=>selectType(e,"type-00")} className="form-check-input bg-white" />
                                        <span className="flex items-center ml-auto checkbox-containers" id={id + "-container"}>{Lang("public.title_discount_type")}</span>
                                    </div>
                                </h2>
                                <div id="type-00">
                                    {bookType?.map((type, index)=>{
                                        // let exists = discountTypes?.find(types => types.book_type_id == type.code);
                                        // let exists = discountTypes?.filter(book => book.book_type_id == type.code);
                                        let exists = discountTypes?.some(types => types.book_type_id == type.code);  
                                        return(
                                                <CheckBox label={type?.["title_"+local]} refItem={[component, "book_type_id_"+type?.code]} key={index} defaultValue={exists} />
                                            );
                                        })
                                    }
                                </div>
                            </div>
                            <div className="col-span-12">
                                <h2 id="accordion-open-heading-1">
                                    <div className="flex items-center justify-between w-full p-5 font-extrabold rtl:text-right text-gray-700 bg-gray-100 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-open-body-1" aria-expanded="true" aria-controls="accordion-open-body-1">
                                        <input type="checkbox" onChange={(e)=>selectType(e,"cat-00")} className="form-check-input bg-white" />
                                        <span className="flex items-center ml-auto checkbox-containers" id={id + "-container"}>{Lang("public.title_discount_category")}</span>
                                    </div>
                                </h2>
                                <div id="cat-00">
                                    {categories?.map((category, index)=>{
                                        let exists = discountCategories?.some(cat => cat.category_id == category.id);
                                        return(
                                            <CheckBox label={category?.name} refItem={[component, "category_id_"+category?.id]} key={index} defaultValue={exists} />
                                            );
                                        })
                                    }
                                </div>
                            </div>
                         </Box>
                    </Frame>
                </>
            }
            <ButtonContainer>
                <Button label="save" onClick={saveItem} component={component} />
                <Button label="back" onClick={back} />
            </ButtonContainer>
        </>
    );
}