import React, { useEffect } from "react";
import PictogramsSeparate from "./PictogramsSeparate";
import DishList from "./DishList";
import CircularProgress from "@material-ui/core/CircularProgress";
import { useParams } from "react-router-dom";
import { extractTags } from "../../Services";
import { useSelector, useDispatch } from "react-redux";
import { fetchRestaurant } from "../../actions";
import GoogleMapStatic from "./GoogleMapStatic";
import WorkingHours from "./WorkingHours";
import Social from "./Social";
import LunchMenu from "./LunchMenu";

export default function Restaurant(props) {
  const restaurant = useSelector((state) => state.restaurant);
  const { id } = useParams();
  const dispatch = useDispatch();
  const showDishList = useSelector((state) => state.data.showDishList);

  useEffect(() => {
      dispatch(fetchRestaurant(id));
  }, [dispatch, id]);

  if (restaurant.name) document.title = restaurant.name;

  return (
    <div className="restaurant-container">
      <div className="restaurant-left">
        <div
          className="restaurant-hero"
          style={{ backgroundImage: "url(" + restaurant.imgUrl + ")" }}
        ></div>
        <div className="restaurant-info">
          <h1>{restaurant.name}</h1>
          <p>{restaurant.description}</p>
          <hr />
          <div className="restaurant-pictograms">
            <PictogramsSeparate pictograms={extractTags(restaurant.tags)} />
          </div>
          <hr />
          <h5>Informacje</h5>
          <p>
            Adres:{" "}
            <span className="restaurant-span">
              {restaurant.city}, {restaurant.adress}
            </span>
          </p>
          {restaurant.phone && (
            <p>
              Kontakt:{" "}
              <span className="restaurant-span">{restaurant.phone}</span>
            </p>
          )}
          {restaurant.links && (
            <Social
              facebook={restaurant.links.facebook}
              instagram={restaurant.links.instagram}
              www={restaurant.links.www}
            />
          )}
          <WorkingHours hours={restaurant.workingHours} />
          {restaurant.lunchHours && <h5>Lunch menu</h5>}
          {restaurant.lunchHours && (
            <p style={{ color: "#bbbbbb", fontWeight: 400 }}>{restaurant.lunchHours}</p>
          )}
          <hr />
          <h5>Lokalizacja</h5>
          {restaurant.location && (
            <GoogleMapStatic coordinates={restaurant.location.coordinates} />
          )}
        </div>
      </div>
      <div className="restaurant-content">
        <div className="restaurant-dishes">
          {!showDishList && <CircularProgress />}
          {(showDishList && restaurant.lunchMenu) && <LunchMenu restaurant={restaurant} />}
          <h3>Menu</h3>
          {!showDishList && <CircularProgress />}
          {showDishList && <DishList />}
        </div>
      </div>
    </div>
  );
}