import useAdmui from './useAdmui';
import AdmuiAsterisk from './AdmuiAsterisk';

function AdmuiTextarea({ label = 'aui-control-label', x = null, required = false, name, rows = 1, monospace = false, uppercase = false, tabular = false }) {
    const { control, field, isInvalid, id, isValid } = useAdmui({ name, required });

    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">
                    <textarea
                        className={`aui-control-textarea ${monospace && 'monospace'} ${uppercase && 'uppercase'}  ${tabular && 'tabular'}`}
                        id={id} {...field}
                        value={field.value ?? ''}
                        autoComplete='off'
                        rows={rows}
                    ></textarea>
                </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 AdmuiTextarea