import { FileUpload } from "@mui/icons-material";
import { Button, IconButton, OutlinedInput, TextField } from "@mui/material";
import InputAdornment from '@mui/material/InputAdornment';
import { useState } from "react";


export type CustomAdornmentTextFieldProps = {
    label: string,
    name: string,
    changeHandler: (event: React.ChangeEvent<HTMLInputElement>) => void,
    isMultline: boolean,
}

const CustomAdornmentTextField = (props: CustomAdornmentTextFieldProps) => {
    const [fileName, setFileName] = useState<string>("");
    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files?.[0];
        if (file) {
          setFileName(file.name);
        } else {
          setFileName("");
        }
      };
    //<InputLabel htmlFor="outlined-adornment-password">Password</InputLabel>
    return (        
        <div>
      <TextField
        fullWidth
        variant="outlined"
        label="Choose File"
        value={fileName}
        InputProps={{
          endAdornment: (
            <InputAdornment position="end">
              <Button variant="contained" component="label">
                Browse
                <input
                  type="file"
                  hidden
                  onChange={handleFileChange}
                />
              </Button>
            </InputAdornment>
          ),
        }}
      />
    </div>
        // <OutlinedInput 
        //     label={props.label}
        //     name={props.name}
        //     onChange={props.changeHandler}
        //     fullWidth={true}
        //     endAdornment={
        //         <InputAdornment position="end">
        //             <Button variant="contained" component="label">
        //                 <IconButton>
        //                     <FileUpload/>
        //                 </IconButton>
        //                 <input
        //                 type="file"
        //                 hidden
        //                 onChange={handleFileChange}
        //                  />
                    
        //             </Button>
        //         </InputAdornment>
        //     }
        // />
    );
}

export default CustomAdornmentTextField;