import React from "react";
import PictogramsSeparate from "./PictogramsSeparate";
import DishList from "./DishList";
import CircularProgress from "@material-ui/core/CircularProgress";
import { extractTags } from "../../Services";
import { useSelector } from "react-redux";

export default function Restaurant(props) {
  const restaurant = useSelector((state) => state.restaurant);
  const showDishList = useSelector((state) => state.data.showDishList);

  return (
    <div className="restaurant-container">
      <div className="restaurant-content">
        <div className="restaurant-info">
          <div
            className="restaurant-hero"
            style={{ backgroundImage: "url(" + restaurant.imgUrl + ")" }}
          ></div>
          <h1>{restaurant.name}</h1>
          <p>{restaurant.description}</p>
          <hr />
          <p>
            Miejscowość:{" "}
            <span className="restaurant-span">{restaurant.city}</span>
          </p>
          <p>
            Godziny pracy:{" "}
            <span className="restaurant-span">{restaurant.workingHours}</span>
          </p>
          {restaurant.phone && (
            <p>
              Kontakt:{" "}
              <span className="restaurant-span">{restaurant.phone}</span>
            </p>
          )}
          <hr />
          <div className="restaurant-pictograms">
            <PictogramsSeparate pictograms={extractTags(restaurant.tags)} />
          </div>
        </div>
        <div className="restaurant-dishes">
          <h3>Menu</h3>
          {showDishList === false && <CircularProgress />}
          {showDishList === true && <DishList />}
        </div>
      </div>
    </div>
  );
}