import React, { useState } from "react";
import ImageUploadWide from "../Input/ImageUploadWide";
import ButtonSecondary from "../Input/ButtonSecondary";
import ButtonPrimary from "../Input/ButtonPrimary";
import { useDispatch, useSelector } from "react-redux";
import { notification, refreshUserData } from "../../actions";
import { showBackdrop, hideBackdrop } from "../../actions/toggles.js";
import axios from "axios";
import { backend } from "../../config";

export default function EditRestaurantPhoto(props) {
  const {
    imgUrl,
    dishes,
    categories,
    lunchMenu,
    name,
    city,
    adress,
    placesId,
    location,
    workingHours,
    description,
    tags,
    links,
    phone,
    hidden,
  } = props.restaurant;
  const [url, setUrl] = useState(imgUrl);
  const token = useSelector((state) => state.data.userData.jwt);
  const dispatch = useDispatch();
  const handleSave = () => {
    dispatch(showBackdrop());
    const data = {
      restaurantId: props.restaurant._id,
      dishes: dishes,
      categories: categories,
      lunchMenu: lunchMenu,
      name: name,
      city: city,
      adress: adress,
      coordinates: location.coordinates,
      placesId: placesId,
      imgUrl: url,
      workingHours: workingHours,
      description: description,
      tags: tags,
      links: links,
      phone: phone,
      hidden: hidden,
    };
    axios({
      url: backend + "restaurant",
      method: "PUT",
      data: data,
      headers: {
        "x-auth-token": token,
      },
    })
      .then((res) => {
        dispatch(hideBackdrop());
        dispatch(notification("Zmieniono zdjęcie.", "success"));
        dispatch(refreshUserData());
      })
      .catch((e) => {
        dispatch(hideBackdrop());
        dispatch(notification("Nie udało się zmienić zdjęcia :(", "error"));
        throw e;
      });
  };
  return (
    <div className="editRestaurant-tab">
      <h3>Zdjęcie lokalu</h3>
      <ImageUploadWide img={url} onUpload={(newUrl) => setUrl(newUrl)} />
      <div className="editRestaurant-bottom">
        <ButtonPrimary text="Anuluj" onClick={() => setUrl(imgUrl)} />
        <ButtonSecondary onClick={handleSave} text="Zapisz" />
      </div>
    </div>
  );
}