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

export function Form({ id }) {
    const { Lang, local } = useLang();
    const { laraAdmin } = useConfig();
    const router = useRouter();
    let component = useFormRefs();
    let { save, get, getNeedles } = useData();
    let [needles, setNeedles] = useState();
    const [allPacakges, setAllPacakges] = 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(`discounts.${method}`);

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

    useEffect(() => {
        if (component?.state?.info?.id)
        {
            let count_pacakge = component.state.info.count_pacakge;
            if(count_pacakge == 0) setAllPacakges(1);
            else if(count_pacakge > 0) setAllPacakges(0);
        }
    }, [component?.state?.info]);

    const getElement = () => {
        const div = document.getElementById("package-00");
        const checkboxes = div.querySelectorAll('input[type="checkbox"]');
        return checkboxes;
    }
    const selectParent = (e) => {
        const checkboxes = getElement();
        setAllPacakges(e);
        checkboxes.forEach(checkbox => {
            checkbox.checked = !e;
            checkbox.click();
        });
    };
    const selectChilds = (e) => { if(e == 0) setAllPacakges(0); }
    
    const saveItem000 = () => {
        save(`${laraAdmin}/discount-test?code=A15&package_id=1`, component, method, formUrl);
    }
    const saveItem = () => {
        let countPackages = packages?.length;
        let counterPackage = 0;
        const checkboxes = getElement();

        checkboxes.forEach(checkbox => {
            if(checkbox.checked) counterPackage += 1;
        });

        if(counterPackage > 0)
        {
            if(countPackages == counterPackage) setAllPacakges(1);
            else setAllPacakges(0);
            save(url, component, method, formUrl);
        }
        else Toast.warning(Lang('public.text_discount_checkBox'), Lang('public.dear_user'), 5000);
    }

    const back = () => router.back();
    const data = component?.state?.info;
    const discountPackages = data?.discount_packages;
    const calculateType = needles?.calculatetype;
    const packages = needles?.package;
    
    return (
        (needles == null || needles == undefined)?
            <Frame title={Lang("discounts")}>
                <div className="col-span-12 xxl:col-span-9">
                    <Loading className="mt-5" />
                </div>
            </Frame>
        :
            <>
                <Frame title={Lang("discounts")}>
                    <Box>
                        <Input label="title" refItem={[component, "title"]} required="true" />
                        <Line/>
                        <DatePicker label="date_time_start" refItem={[component, "date_start"]} required="true" />
                        <TimePicker placeholder="09:10" refItem={[component, "time_start"]} required="true" />
                        <DatePicker label="date_time_end" refItem={[component, "date_end"]} required="true" />
                        <TimePicker placeholder="10:30" 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" />
                        <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">
                                    <CheckBox id="all_pacakges" label="all_pacakges" refItem={[component, "all_pacakges"]} defaultValue={allPacakges}
                                        onChange={(e)=>selectParent(e)} key={"all_pacakges_"+allPacakges}
                                    />
                                </div>
                            </h2>
                            <div id="package-00">
                                {packages?.map((packages, index)=>{
                                    let exists = data?.count_pacakge == 0? true : discountPackages?.some(discountPackage => discountPackage.package_id == packages.id);
                                    
                                    return(
                                            <CheckBox key={index} label={packages?.title} onChange={(e)=>selectChilds(e)} 
                                                refItem={[component, "package_id_"+packages?.id]} defaultValue={exists}
                                            />
                                        );
                                    })
                                }
                            </div>
                        </div>
                    </Box>
                </Frame>
                <ButtonContainer>
                    <Button label="save" onClick={saveItem} component={component} />
                    <Button label="back" onClick={back} />
                </ButtonContainer>
            </>
    );
}