import { useFormContext, useController } from 'react-hook-form'
import { useEffect, useState, useRef } from 'react';
import useAdmui from './useAdmui';
import AdmuiAsterisk from './AdmuiAsterisk';
import { IoChevronDown } from "react-icons/io5";
import { searchFn } from './Admui';
function AdmuiSelect({ label = 'aui-control-label', x = null, required = false, name, options = [], tabular = false }) {
    const { control, field, isInvalid, id, isValid } = useAdmui({ name, required });
    const [backdrop, setBackdrop] = useState(false);
    const selectRef = useRef(null); // 👈 create the ref
    const searchRef = useRef(null);
    const [rect, setRect] = useState(null);

    // const [displayOptions, setDisplayOptions] = useState([]);
    // useEffect(() => {
    //     setDisplayOptions(options);
    // }, [options])

    const selectFocus = (e) => {
        e.preventDefault();
        setBackdrop(true);
        setSearch('');
        setTimeout(() => searchRef.current.focus(), 1)

        // lets calculate position

        if (selectRef.current) {
            const _rect = selectRef.current.getBoundingClientRect();
            console.log('Bounding rect:', _rect);
            setRect(_rect);
        }
    }

    const backdropClick = (e) => {
        setBackdrop(false)
    }
    const containerClick = (e) => {
        e.preventDefault();
        e.stopPropagation();
    }

    const select = (value) => {
        console.log(value);
        field.onChange(value);
        setBackdrop(false);
    }

    const [search, setSearch] = useState('');

    useEffect(() => {
        setFilteredOptions(options.filter(f => searchFn(search, [f[1]])))
    }, [search, options])

    const handleKeyDown = (e) => {
        if (e.key === 'Enter') {
            e.preventDefault();
            return select(filteredOptions[0][0]);
        }
        if (e.key === 'Tab') {
            // e.preventDefault();
            // // searchRef.current.blur();
            // 
            setTimeout(() => {
                backdropClick();
            }, 1);
        }
    }
    const [filteredOptions, setFilteredOptions] = useState(options);

    return (
        <>
            <div className={`aui-control-container ${x ? 'aui-control-container-x' : 'aui-control-container-y'} ${isInvalid ? 'aui-control-container-invalid' : ''}`}
                style={{ '--aui-control-container-x': `${x}px` }}
            >
                <div className="aui-control-label-container">
                    <label className="aui-control-label" htmlFor={id}>{label} </label> {required ? <AdmuiAsterisk isInvalid={!isValid} /> : ''}
                </div>
                <div className="aui-control-control-container" ref={selectRef}>
                    <select className={`aui-control-select ${tabular && 'tabular'}`}
                        id={id} {...field} value={field.value ?? ''} onFocus={(e) => selectFocus(e)} onMouseDown={(e) => selectFocus(e)} >
                        <option>- No Selection -</option>
                        {options.map(m => {
                            return <option key={m[0]} value={m[0]}>{m[1]}</option>
                        })}
                    </select>
                    <div className="aui-control-svg-container" onClick={(e) => selectFocus(e)}>
                        <IoChevronDown />
                    </div>
                </div>
                {backdrop ? <div className="aui-backdrop" onClick={(e) => backdropClick(e)}>
                    {!rect ? '' : (
                        <div className={`aui-control-options-container ${tabular && 'tabular'}`} style={{ top: `${rect.y + rect.height}px`, left: `${rect.x}px`, width: `${rect.width}px` }} onClick={(e) => containerClick(e)}>
                            <div className="aui-control-options-search-container">
                                <input
                                    className="aui-control-options-search"
                                    ref={searchRef}
                                    value={search}
                                    onChange={(e) => setSearch(e.target.value)}
                                    onKeyDown={(e) => handleKeyDown(e)}
                                    autoComplete='off'
                                />
                            </div>
                            <div className="aui-control-options-items">
                                <div className="aui-control-options-item" onClick={() => select(null)}>- No Selection -</div>
                                {filteredOptions.map(m => {
                                    return <div className="aui-control-options-item" key={m[0]} onClick={() => select(m[0])}>{m[1]}</div>
                                })}
                            </div>

                        </div>
                    )}
                </div> : ''}
            </div >
        </>
    )
}
/*
              onChange={(e) => {
                        const rawValue = e.target.value;
                        const transformedValue = rawValue.toUpperCase(); // 👈 example transformation
                        field.onChange(transformedValue); // ✅ send transformed value to RHF
                    }}
*/
export default AdmuiSelect