import React, { useState } from "react";
import CircularProgress from "@material-ui/core/CircularProgress";
import { useSelector } from "react-redux";
import axios from "axios";
import { backend } from "../../config";

export default function ImageUpload(props) {
  const { img } = props;
  const [loading, setLoading] = useState(false);
  const token = useSelector((state) => state.data.userData.jwt);

  const handleInputChange = (event) => {
    let data = new FormData();
    data.append("menuiImage", event.target.files[0]);
    setLoading(true);
    axios({
      url: backend + "img",
      method: "POST",
      data: data,
      headers: {
        Accept: "application/json",
        "Content-Type": "multipart/form-data",
        "x-auth-token": token,
      },
    })
      .then((response) => {
        props.onUpload(response.data.imgURL);
        setLoading(false);
      })
      .catch((error) => {
        console.log("Wystąpił błąd podczas wgrywania pliku.");
        setLoading(false);
      });
  };

  let imagePreview = (
    <div className="image-preview-wide">
      {loading ? <CircularProgress /> : "Proszę wybrać obraz. (max. 2MB)"}
    </div>
  );
  if (img) {
    imagePreview = (
      <div
        className="image-preview-wide"
        style={{ backgroundImage: `url(${img})` }}
      ></div>
    );
  }

  return (
    <div className="image-upload-container-wide">
      {imagePreview}
      <input
        name="menuiImage"
        id="file"
        type="file"
        className="input-image-wide"
        onChange={handleInputChange}
      ></input>
      <label htmlFor="file">Wybierz plik...</label>
    </div>
  );
}