import { useState } from 'react'
import { Box, Button } from '@mui/material';

type ImageInputAndDisplayProps = {
  selectedFile: File | null;
  setSelectedFile: React.Dispatch<React.SetStateAction<File | null>>;
}

const ImageInputAndDisplay = ({ selectedFile, setSelectedFile }: ImageInputAndDisplayProps) => {
  const [imageUrl, setImageUrl] = useState<string | null>(null);

  const handleFileChange = (event: any) => {
    if (event.target.files && event.target.files.length > 0) {
      const file = event.target.files[0];
      setSelectedFile(file);

      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        setImageUrl(reader.result as string);
      };
    }
  };

  const handleButtonClick = () => {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';
    input.onchange = handleFileChange;
    input.click();
  };
  return (
    <Box 
      sx={{
        width: '200px',
        maxWidth: '100%',
        height: '200px',
        border: '2px solid',
        borderColor: 'primary.main',
        borderRadius: '10px',
        overflow: 'hidden',
        backgroundImage: `url(${imageUrl})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center top',
        mx: 'auto'
      }}
    >
      <Button 
        onClick={handleButtonClick}
        sx={{
          width: '100%',
          height: '100%',
          backgroundColor: '#00000050'
        }}
      >
        {imageUrl ? 'Change Image' : 'Upload Image'}
      </Button>
    </Box>
  )
}

export default ImageInputAndDisplay