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

export default function ImageUpload(props) {
  const dispatch = useDispatch();
  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) => {
        if (error.response) {
          if (error.response.status === 413) {
            dispatch(notification("Błąd wysyłania. Sprawdź rozmiar pliku (max 2MB.)", "error"))
          } else if (error.response.status === 401) {
            dispatch(notification("Błąd wysyłania. Brak dostępu.", "error"))
          } else {
            dispatch(notification("Błąd wysyłania. Serwer odrzucił plik.", "error"))
          }
          setLoading(false);
        } else if (error.request) {
          dispatch(notification("Błąd wysyłania. Brak odpowiedzi od serwera.", "error"))
          setLoading(false);
        } else {
          dispatch(notification("Błąd wysyłania.", "error"))
          setLoading(false);
        }
      });
  };

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

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