"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.StyledProductPart = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _clsx = _interopRequireDefault(require("clsx"));
var _get = _interopRequireDefault(require("lodash/get"));
var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
var _getImageUrl = _interopRequireDefault(require("../../../../Utils/getImageUrl"));
var _customClassName = _interopRequireDefault(require("../../../../Utils/customClassName"));
var _i18n = require("../../../../../Framework/i18n");
var _styles = require("@material-ui/core/styles");
var _AccessibleButton = _interopRequireDefault(require("../../../../Shared/Components/AccessibleButton/AccessibleButton"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var ProductPart = function ProductPart(_ref) {
  var displaySwitchedOptions = _ref.displaySwitchedOptions,
    onSelect = _ref.onSelect,
    optionclassification = _ref.optionclassification,
    selectedOption = _ref.selectedOption,
    verticalMode = _ref.verticalMode,
    setAnchorRef = _ref.setAnchorRef,
    classes = _ref.classes,
    optionListVisible = _ref.optionListVisible,
    onCloseSelected = _ref.onCloseSelected;
  var selected = (0, _get["default"])(selectedOption, 'identifier', null) === (0, _get["default"])(optionclassification, 'identifier', '');
  var selectedAndVisible = optionListVisible && selected;
  var direction = verticalMode ? 'vertical' : 'horizontal';
  (0, _react.useEffect)(function () {
    if (!optionListVisible && selected) {
      onCloseSelected(optionclassification);
    }
  }, [optionListVisible]);
  var displayImage = function displayImage() {
    var imageUrl = displaySwitchedOptions && selectedOption ? (0, _getImageUrl["default"])(selectedOption.thumbnail) : (0, _getImageUrl["default"])(optionclassification.thumbnail);
    return /*#__PURE__*/_react["default"].createElement("i", {
      className: "".concat(classes.icon, " ").concat(direction),
      style: imageUrl ? {
        backgroundImage: 'url(' + imageUrl + ')'
      } : {},
      "aria-label": (0, _i18n.t)('ariaLabels.component', {
        title: optionclassification.title
      }),
      role: "img"
    });
  };
  var displayText = function displayText() {
    return /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
      className: classes.rootTypography,
      variant: "body1",
      component: "span"
    }, /*#__PURE__*/_react["default"].createElement(_i18n.Hyphenated, null, optionclassification.title));
  };
  var onClick = function onClick(event) {
    event.stopPropagation();
    onSelect(optionclassification);
  };
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _clsx["default"])(classes.root, direction, (0, _customClassName["default"])('component')),
    ref: setAnchorRef
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(classes.marker, " ").concat(direction, " ").concat(selectedAndVisible ? 'selected' : '')
  }), /*#__PURE__*/_react["default"].createElement(_AccessibleButton["default"], {
    className: "".concat(classes.content, " ").concat(direction),
    onClick: onClick
  }, displayImage(), displayText()));
};
ProductPart.defaultProps = {
  optionclassification: {},
  onSelect: function onSelect() {},
  verticalMode: true
};
var StyledProductPart = exports.StyledProductPart = (0, _styles.withStyles)(function (theme) {
  var _root, _selected;
  var captionMaxHeight = "calc(".concat(theme.creator.productPart.captionPaddingTop, " + ").concat(theme.creator.productPart.lineHeight, " * 2)");
  var iconMaxHeigth = "calc(".concat(theme.creator.productPart.itemSize, " - ").concat(captionMaxHeight, ")");
  var iconSizeWithoutMarker = "calc(".concat(theme.creator.productPart.itemSize, ")");
  return {
    root: (_root = {}, _defineProperty(_root, theme.breakpoints.up('sm'), {
      width: theme.creator.productPart.selectedItemSize
    }), _defineProperty(_root, "width", theme.creator.productPart.itemSize), _defineProperty(_root, "height", 'auto'), _defineProperty(_root, '&.horizontal', {
      padding: '0 10px'
    }), _defineProperty(_root, '&.vertical', {
      marginLeft: 'auto',
      display: 'flex',
      flexDirection: 'row-reverse'
    }), _defineProperty(_root, "tapHighlightColor", theme.tapHighlightColor), _root),
    content: {
      alignItems: 'center',
      display: 'flex',
      flexDirection: 'column',
      cursor: 'pointer',
      textAlign: 'center',
      position: 'relative',
      '&.horizontal': _defineProperty({
        padding: theme.spacing(1, 0, 0, 0),
        width: theme.creator.productPart.itemSize,
        height: 'auto',
        whiteSpace: 'normal',
        '& span': {
          marginBottom: 0
        }
      }, theme.breakpoints.down('xs'), {
        padding: theme.spacing(0.5, 0, 0, 0)
      }),
      '&.vertical': {
        padding: theme.spacing(0, 0, 1, 0),
        width: iconSizeWithoutMarker,
        margin: 0
      }
    },
    icon: {
      maxHeight: iconMaxHeigth,
      backgroundPosition: 'center',
      backgroundRepeat: 'no-repeat',
      backgroundSize: 'contain',
      display: 'block',
      '&.horizontal': _defineProperty({
        width: theme.creator.productPart.itemSize,
        height: 'calc(0.75*' + theme.creator.productPart.itemSize + ')'
      }, theme.breakpoints.down('xs'), {
        maxHeight: "calc(0.75 * ".concat(iconMaxHeigth, ")")
      }),
      '&.vertical': {
        width: iconSizeWithoutMarker,
        height: 'calc(0.75*' + iconSizeWithoutMarker + ')'
      }
    },
    marker: {
      backgroundColor: 'transparent',
      '&.horizontal': {
        width: theme.creator.productPart.itemSize,
        height: theme.creator.productPart.markerThickness
      },
      '&.vertical': {
        width: theme.creator.productPart.markerThickness,
        margin: theme.spacing(0, 0, 1, 0)
      },
      '&.selected': (_selected = {}, _defineProperty(_selected, theme.breakpoints.down('sm'), {
        marginBottom: 4
      }), _defineProperty(_selected, theme.breakpoints.down('xs'), {
        marginBottom: 0
      }), _defineProperty(_selected, "backgroundColor", theme.palette.primary.main), _selected)
    },
    rootTypography: {
      paddingTop: theme.creator.productPart.captionPaddingTop,
      display: '-webkit-box',
      overflow: 'hidden',
      wordWrap: 'break-word',
      maxWidth: theme.creator.productPart.itemSize,
      lineHeight: theme.creator.productPart.lineHeight,
      boxOrient: 'vertical',
      lineClamp: 3,
      minHeight: 20
    }
  };
}, {
  name: 'ProductPart'
})(ProductPart);
var _default = exports["default"] = StyledProductPart;