import React from "react";
import AlertCircle from "@pisell/icon/es/AlertCircle";
import { Popover } from "antd";
import { getUsableSchedules, getScheduleColors } from "../../utils";
import "./index.less";
import { locales } from "@pisell/utils";
var ProductItem = function ProductItem(_ref) {
  var item = _ref.item,
    onClickItem = _ref.onClickItem,
    _ref$layout = _ref.layout,
    layout = _ref$layout === void 0 ? "all" : _ref$layout;
  return /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__schedules-component-products-item",
    key: item.id,
    onClick: function onClick() {
      onClickItem(item);
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__schedules-component-products-item-left"
  }, layout === "day" ? /*#__PURE__*/React.createElement("div", {
    className: "tag",
    style: {
      background: getScheduleColors(item["schedules"])
    }
  }) : null, /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__schedules-component-products-item-title"
  }, item.title)), /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__schedules-component-products-item-right"
  }, layout === "day" ? /*#__PURE__*/React.createElement("div", {
    className: "hours"
  }, item._schedules.str) : null, layout === "day" || getUsableSchedules(item._schedules) ? null : /*#__PURE__*/React.createElement(Popover, {
    content: locales.getText("pisell2.text.products.no-current-schedule")
  }, /*#__PURE__*/React.createElement(AlertCircle, {
    className: "pisell-lowcode__schedules-component-products-item-icon"
  }))));
};
export default ProductItem;