import useAdmui from './useAdmui';
import AdmuiAsterisk from './AdmuiAsterisk';
import moment from 'moment';
import { useEffect, useRef, useState, useCallback } from 'react';
import { useWatch } from 'react-hook-form';
import AdmuiCalendar from './AdmuiCalendar';
import { IoIosCalendar } from "react-icons/io";
import AdmuiWrapper from './AdmuiWrapper';

function AdmuiDate(p) {
    // function AdmuiDate({ label = 'aui-control-label', x = null, required = false, name, tabular = false }) {
    // const { control, field, isInvalid, id, setValue, isValid, isDirty } = useAdmui({ name, required });
    const { field, id, setValue, isInvalid, isDirty } = useAdmui({ name: p.name, required: p.required });

    const value = useWatch({ name: p.name });

    const [focus, setFocus] = useState(false);

    const transformDate = (val) => {
        let date = moment.utc(val, 'YYYY-MM-DD');
        date = date.isValid() ? date.format('YYYY-MM-DD') : null;
        return date;
    }

    const [displayValue, setDisplayValue] = useState('helloka');

    useEffect(() => {

        const v = transformDate(value);
        console.warn(`Date handler ${value} -> ${v}`);
        if (!focus) {

            // if (value !== v) field.onChange(v);
            setDisplayValue(v);
            if (value !== v) {
                // field.onChange(v);
                // console.warn(`setting value ${value} -> ${v}`)
                setValue(p.name, v, { shouldDirty: false });

            }
        }
        // 
    }, [value])

    const [backdrop, setBackdrop] = useState(false);
    const [rect, setRect] = useState(null);
    const containerRef = useRef(null);
    const openCalendar = (e) => {
        e.preventDefault();
        setBackdrop(true);
        if (containerRef.current) {
            const _rect = containerRef.current.getBoundingClientRect();
            // console.log('Bounding rect:', _rect);
            setRect(_rect);
        }
    }

    const close = () => {
        setBackdrop(false);
        setRect(null);
    }

    // incoming date from calendar
    const calendarSelect = (val) => {
        const v = transformDate(val);
        field.onChange(v);
        // console.warn(val, v);
        // if (val !== v) 
    }

    const manualInput = (e) => {
        setDisplayValue(e);
        // Calculate correct value
        const v = transformDate(e);
        console.warn(`Inputting ${e} -> ${v} :: ${focus}`);
        field.onChange(v);
    }
    const triggerSync = () => {
        setDisplayValue(value);
    }

    return <AdmuiWrapper _id={id} {...p}>
        <div className="aui-control-control-container" ref={containerRef}>
            <input
                {...field}
                value={field.value ?? ''}
                style={{ display: 'none' }}
            />
            <input
                className={`aui-control-input ${p.monospace && 'monospace'} ${p.uppercase && 'uppercase'} ${p.tabular && 'tabular'}`}
                id={id}
                // {...field}
                // value={field.value ?? ''}
                value={displayValue ?? ''}
                onChange={(e) => manualInput(e.target.value)}
                autoComplete='off'
                onFocus={(e) => {
                    setFocus(true);
                }}
                onBlur={(e) => {
                    calendarSelect(field.value);
                    setFocus(false);
                    triggerSync();
                    // field.onBlur();
                }}
            />
            <div className="aui-control-svg-container" onClick={(e) => openCalendar(e)}>
                <IoIosCalendar />
            </div>
        </div>
        {backdrop ? <AdmuiCalendar rect={rect} backdrop={backdrop} value={value} select={calendarSelect} close={close} /> : ''}
    </AdmuiWrapper >

    return (
        <>
            <div className={`aui-control-container ${p.x ? 'aui-control-container-x' : 'aui-control-container-y'} ${isInvalid ? 'aui-control-container-invalid' : ''}`}
                style={{ '--aui-control-container-x': `${p.x}px` }}
            >
                <div className="aui-control-label-container">
                    <label className="aui-control-label" htmlFor={id} >{p.label} </label> {p.required ? <AdmuiAsterisk isInvalid={isInvalid || !isDirty} /> : ''}
                </div>
                <div className="aui-control-control-container" ref={containerRef}>
                    <input
                        className="aui-control-input"
                        id={id} {...field}
                        value={field.value ?? ''}
                        autoComplete='off'
                        onFocus={(e) => {
                            setFocus(true);
                        }}
                        // onChange={(e) => {
                        //     console.warn('onchange')
                        //     field.onChange();
                        // }}

                        onBlur={(e) => {
                            calendarSelect(field.value);
                            setFocus(false);
                            field.onBlur();

                        }}
                    />
                    <div className="aui-control-svg-container" onClick={(e) => openCalendar(e)}>
                        <IoIosCalendar />
                    </div>
                </div>
                {backdrop ? <AdmuiCalendar rect={rect} backdrop={backdrop} value={value} select={calendarSelect} close={close} /> : ''}
            </div >
        </>
    )
}
/*
              onChange={(e) => {
                        const rawValue = e.target.value;
                        const transformedValue = rawValue.toUpperCase(); // 👈 example transformation
                        field.onChange(transformedValue); // ✅ send transformed value to RHF
                    }}
*/
export default AdmuiDate