import React from "react";
import Pictograms from "./Pictograms";
import { extractTags } from "../../Services";
import { useHistory } from "react-router-dom";
import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";

export default function CardDish(props) {
  const history = useHistory();
  const {
    name,
    prices,
    imgUrl,
    weight,
    vegan,
    vegetarian,
    allergens,
    _id,
  } = props.dish;

  const FormatPrices = () => {
    if (prices.price1.priceName === "") {
      return(
        <h5>{ prices.price1.price }zł</h5>
      )
    } else {
      return (
        <div className="carddish-prices-multi">
          {prices.price1.priceName !== "" && <h5>{prices.price1.price}zł ({ prices.price1.priceName })</h5>}
          {prices.price2.priceName !== "" && <h5>{prices.price2.price}zł ({prices.price2.priceName})</h5>}
          {prices.price3.priceName !== "" && <h5>{prices.price3.price}zł ({ prices.price3.priceName })</h5>}
        </div>
      )
    }
  }

  return (
    <div
      className="carddish-container"
      onClick={() => history.push(`/dish/${_id}`)}
    >
      <div className="carddish-left">
        <div
          className="carddish-img"
          style={{ backgroundImage: "url(" + imgUrl + ")" }}
        />
        <div className="carddish-left-info">
          <div className="carddish-left-upper">
            <h2>{name}</h2>
            <div className="carddish-left-middle">
              <p>Porcja: {weight}</p>
              <p>
                {(vegan & vegetarian) ? "wegańskie | wegetariańskie" : ""}
                {(vegan & !vegetarian) ? "wegańskie" : ""}
                {(!vegan & vegetarian) ? "wegetariańskie" : ""}
              </p>
            </div>
          </div>
          <Pictograms pictograms={extractTags(allergens)} />
        </div>
      </div>
      <div className="carddish-right">
        <FormatPrices/>
        <KeyboardArrowRightIcon color="primary" />
      </div>
    </div>
  );
}