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

export default function EditRestaurantLocation(props) {
  const {
    imgUrl,
    dishes,
    categories,
    lunchMenu,
    name,
    city,
    adress,
    placesId,
    location,
    workingHours,
    description,
    tags,
    links,
    phone,
    hidden,
  } = props.restaurant;
  const initialState = {
    coordinates: location.coordinates,
    placesId: placesId,
  };
  const token = useSelector((state) => state.data.userData.jwt);
  const dispatch = useDispatch();
  const [state, setState] = useState(initialState);
  const handleSave = () => {
    dispatch(showBackdrop());
    const data = {
      restaurantId: props.restaurant._id,
      dishes: dishes,
      categories: categories,
      lunchMenu: lunchMenu,
      name: name,
      city: city,
      adress: adress,
      coordinates: state.coordinates,
      placesId: placesId,
      imgUrl: imgUrl,
      workingHours: workingHours,
      description: description,
      tags: tags,
      links: links,
      phone: phone,
      hidden: hidden,
    };
    axios({
      url: "http://localhost:4000/restaurant",
      method: "PUT",
      data: data,
      headers: {
        "x-auth-token": token,
      },
    })
      .then((res) => {
        dispatch(hideBackdrop());
        dispatch(notification("Zmieniono lokalizację.", "success"));
      })
      .catch((e) => {
        dispatch(hideBackdrop());
        dispatch(notification("Nie udało się zmienić lokalizacji :(", "error"));
      });
  };

  const setCoordinatesAndPlacesID = (coordinates, placesID) => {
    if (!placesID) {
      setState({ ...state, coordinates: coordinates });
    } else {
      setState({ coordinates: coordinates, placesId: placesID });
    }
  };

  return (
    <div className="editRestaurant-tab">
      <h3>Dane lokalizacyjne</h3>
      <InputGoogleMaps
        setCoordinates={(coordinates, placesID) =>
          setCoordinatesAndPlacesID(coordinates, placesID)
        }
        coordinates={state.coordinates}
      />
      <p>Google Places ID: {state.placesId}</p>
      <div className="editRestaurant-bottom">
        <ButtonSecondary onClick={handleSave} text="Zapisz" />
      </div>
    </div>
  );
}