import useAdmui from './useAdmui';
import { IoSearch } from "react-icons/io5";
import AdmuiWrapper from './AdmuiWrapper';

// function AdmuiText({ label = 'aui-control-label', x = null, required = false, name, monospace = false, uppercase = false, tabular = false, search = false, placeholder = '' }) {
//     const { control, field, isInvalid, id, isValid, isDirty } = useAdmui({ name, required });

//     return (
//         <>
//             <div className={`
//             aui-control-container 
//             ${x ? 'aui-control-container-x' : 'aui-control-container-y'} 
//             ${isInvalid ? 'aui-control-container-invalid' : ''}
//             ${search && 'aui-control-container-search'}
//             `}
//                 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={!isDirty || isInvalid} /> : ''}
//                 </div>
//                 <div className="aui-control-control-container">
//                     <input
//                         className={`aui-control-input ${monospace && 'monospace'} ${uppercase && 'uppercase'} ${tabular && 'tabular'}`}
//                         id={id} {...field}
//                         value={field.value ?? ''}
//                         autoComplete='off'
//                         placeholder={search ? 'Search' : placeholder}
//                     />
//                     {search && <div className="aui-control-svg-container"><IoSearch /></div>}
//                 </div>
//             </div >
//         </>
//     )
// }

function AdmuiText(p) {
    const { field, id } = useAdmui({ name: p.name, required: p.required });
    return <AdmuiWrapper _id={id} {...p}>
        <div className="aui-control-control-container">
            <input
                className={`aui-control-input ${p.monospace && 'monospace'} ${p.uppercase && 'uppercase'} ${p.tabular && 'tabular'}`}
                id={id} {...field}
                value={field.value ?? ''}
                autoComplete='off'
                placeholder={p.search ? 'Search' : p.placeholder}
            />
            {p.search && <div className="aui-control-svg-container"><IoSearch /></div>}
        </div>
    </AdmuiWrapper >
}

export default AdmuiText