import useAdmui from "./useAdmui";
import { IoCloudUploadOutline } from "react-icons/io5";
import { useRef, useState } from "react";
function AdmuiSheet({ label = 'aui-control-label', x = null, required = false, name, file }) {
    const { id } = useAdmui({});
    const isInvalid = false;
    const inputRef = useRef(null);
    const [placeholder, setPlaceholder] = useState('Select file(s)');

    const fileClick = (event) => {
        event.preventDefault();
        event.stopPropagation();
        inputRef.current.blur();
        const fileElement = document.createElement('input');
        fileElement.type = 'file';
        // fileElement.multiple = this.multiple();
        fileElement.addEventListener('change', (event) => {
            if (event.target.files && event.target.files.length > 0) {
                // const formData = new FormData();
                // for (let x of event.target.files) {
                //     formData.append(`files`, x);
                // }

                // files(formData);
                file(event.target.files[0]);
                setPlaceholder(`${event.target.files.length} file(s) selected`);
            }

        })
        fileElement.click();
        // setTimeout(() => {
        //     fileElement.remove();
        // }, 1000);
    }

    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={isInvalid} /> : ''}
                </div>
                <div className="aui-control-control-container">
                    <input
                        className="aui-control-input aui-control-input-file"
                        id={id}
                        autoComplete='off'
                        onClick={fileClick}
                        ref={inputRef}
                        placeholder={placeholder}
                    />
                    <div className="aui-control-svg-container">
                        <IoCloudUploadOutline />
                    </div>
                </div>
            </div >
        </>
    )
}
export default AdmuiSheet