import form_styles from './Form.module.css';
import Button from './Button';
import { useRef } from 'react';


const FileInputRow = (props) => {
    let tooltip = "";
    if (props.tooltip != undefined) {
        tooltip = <Button label="?" kind="inline" tooltip={props.tooltip} />;
    }

    const fileElem = useRef();

    const onClickUpload = () => {
        fileElem.current.click();
    };

    const onFileSelected = () => {
        const file = fileElem.current.files[0];
        if (file) {
            const reader = new FileReader();
            reader.addEventListener("load", () => {
                props.onFile(reader.result);
            });
            reader.readAsText(file);
        }
        fileElem.current.value = "";
    };

    return <div className={form_styles.FormRow}>
        <label>{props.label}</label>
        <input type="text" value={props.value} disabled="disabled" />
        <Button
            label="Upload"
            kind="inline"
            onClick={onClickUpload}
        />
        <Button
            label="Download"
            kind="inline"
            onClick={props.onDownload}
        />
        <Button
            label="Clear"
            kind="inline"
            onClick={props.onClear}
        />
        <Button
            label="Template"
            kind="inline"
            onClick={props.onTemplate}
        />
        {tooltip}
        <input
            type="file"
            ref={fileElem}
            accept={props.accept}
            style={{ display: "none" }}
            onChange={onFileSelected}
        />
    </div>;
};

export default FileInputRow;