import * as React from 'react';
import { useState } from 'react';
import { AvatarStyled, PhotoStyled, InputStyled } from './index.style';

const Photo = ({ defaultPhoto, onPhotoChange }): React.ReactElement => {
  const [photo, setPhoto] = useState(defaultPhoto);

  const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();

      reader.onload = (e) => {
        const newPhoto = e.target.result;
        setPhoto(newPhoto);
        if (onPhotoChange) onPhotoChange(newPhoto); 
      };

      reader.readAsDataURL(file);
    }
  };

  const handleAvatarClick = () => {
    const fileInput = document.getElementById('fileInput') as HTMLInputElement;
    fileInput.click();
  }

  
  return (
    <PhotoStyled>
      <AvatarStyled
        src={photo}
        alt="Выберите фотографию"
        onClick={handleAvatarClick}
       />
      <InputStyled
        id="fileInput"
        type="file"
        accept="image/*"
        onChange={handleFileChange}
      />
    </PhotoStyled>
  );
  
}

export default Photo;