"use strict";

exports.__esModule = true;
exports.default = void 0;
var _map2 = _interopRequireDefault(require("lodash/fp/map"));
var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
var _get2 = _interopRequireDefault(require("lodash/fp/get"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _novaIcons = require("@coorpacademy/nova-icons");
var _provider = _interopRequireWildcard(require("../../atom/provider"));
var _engineStars = _interopRequireDefault(require("./engine-stars"));
var _starsSummary = _interopRequireDefault(require("./stars-summary.css"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const EngineTab = ({
  engine,
  engineIndex,
  firstItemIndex
}) => {
  const {
    type
  } = engine;
  const state = (0, _react.useMemo)(() => engineIndex < firstItemIndex ? 'hidden' : 'active', [engineIndex, firstItemIndex]);
  const dataName = (0, _react.useMemo)(() => `${type}_total_${state}`, [state, type]);
  return /*#__PURE__*/_react.default.createElement("li", {
    className: _starsSummary.default[state],
    key: type,
    "data-name": dataName
  }, /*#__PURE__*/_react.default.createElement(_engineStars.default, _extends({}, engine, {
    key: type,
    className: engineIndex < firstItemIndex ? _starsSummary.default.hidden : _starsSummary.default.active
  })));
};
EngineTab.propTypes = process.env.NODE_ENV !== "production" ? {
  engine: _propTypes.default.shape(_engineStars.default.propTypes),
  engineIndex: _propTypes.default.number,
  firstItemIndex: _propTypes.default.number
} : {};
const EngineTabs = ({
  engines,
  firstItemIndex
}) => {
  return (0, _react.useMemo)(() => _map2.default.convert({
    cap: false
  })((engine, index) => /*#__PURE__*/_react.default.createElement(EngineTab, {
    engine: engine,
    key: `engineTab_${index}`,
    firstItemIndex: firstItemIndex,
    engineIndex: index
  }), engines), [engines, firstItemIndex]);
};
EngineTabs.propTypes = process.env.NODE_ENV !== "production" ? {
  engines: _propTypes.default.arrayOf(_propTypes.default.shape(_engineStars.default.propTypes)),
  firstItemIndex: _propTypes.default.number
} : {};
const StarsSummary = (props, legacyContext) => {
  const {
    total,
    engines
  } = props;
  const skin = (0, _provider.GetSkinFromContext)(legacyContext);
  const [firstItemIndex, setFirstItemIndex] = (0, _react.useState)(0);
  const [totalItems] = (0, _react.useState)(engines.length);
  const dark = (0, _getOr2.default)('#90A4AE', 'common.dark', skin);
  const primary = (0, _get2.default)('common.primary', skin);
  const scrollTo = (0, _react.useCallback)(page => setFirstItemIndex(page), []);
  const handleOnLeft = (0, _react.useCallback)(() => {
    scrollTo(firstItemIndex - 1);
  }, [firstItemIndex, scrollTo]);
  const handleOnRight = (0, _react.useCallback)(() => {
    scrollTo(firstItemIndex + 1);
  }, [firstItemIndex, scrollTo]);
  if ((0, _isEmpty2.default)(engines)) {
    return null;
  }
  const leftArrowView = totalItems > 6 && firstItemIndex > 0 ? /*#__PURE__*/_react.default.createElement("button", {
    className: _starsSummary.default.circle,
    onClick: handleOnLeft,
    "data-name": "left-arrow",
    "data-testid": "stars-summary-left-arrow",
    type: "button"
  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowLeft, {
    style: {
      color: dark
    },
    className: _starsSummary.default.left,
    width: 10,
    height: 10
  })) : null;
  const rightArrowView = totalItems > 6 && firstItemIndex < totalItems - 6 ? /*#__PURE__*/_react.default.createElement("button", {
    className: _starsSummary.default.circle,
    onClick: handleOnRight,
    "data-name": "right-arrow",
    "data-testid": "stars-summary-right-arrow",
    type: "button"
  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowRight, {
    style: {
      color: dark
    },
    className: _starsSummary.default.right,
    width: 10,
    height: 10
  })) : null;
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-name": "myStars",
    className: _starsSummary.default.myStars,
    tabIndex: 0
  }, /*#__PURE__*/_react.default.createElement("div", {
    "data-name": "myStars-wrapper",
    className: _starsSummary.default.myStarsWrapper,
    "data-testid": `stars-summary-engine-index-${firstItemIndex}`,
    tabIndex: 0
  }, /*#__PURE__*/_react.default.createElement("ul", {
    className: _starsSummary.default.allStars,
    "data-name": "engineList",
    "data-testid": "stars-summary-engine-tabs",
    tabIndex: 0
  }, /*#__PURE__*/_react.default.createElement(EngineTabs, {
    engines: engines,
    firstItemIndex: firstItemIndex
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: _starsSummary.default.footerSummaryStars,
    style: {
      backgroundColor: primary
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _starsSummary.default.totalStars
  }, /*#__PURE__*/_react.default.createElement("span", null, total.label), /*#__PURE__*/_react.default.createElement("p", {
    "data-name": "star-counter"
  }, total.stars), /*#__PURE__*/_react.default.createElement("div", {
    className: _starsSummary.default.iconBubble
  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyStar, {
    className: _starsSummary.default.iconHeader,
    style: {
      color: primary
    }
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: _starsSummary.default.navigationLeft
  }, leftArrowView), /*#__PURE__*/_react.default.createElement("div", {
    className: _starsSummary.default.navigationRight
  }, rightArrowView))));
};
StarsSummary.propTypes = process.env.NODE_ENV !== "production" ? {
  total: _propTypes.default.shape({
    label: _propTypes.default.string.isRequired,
    stars: _propTypes.default.number.isRequired
  }).isRequired,
  engines: _propTypes.default.arrayOf(_propTypes.default.shape(_engineStars.default.propTypes)).isRequired
} : {};
StarsSummary.contextTypes = {
  skin: _provider.default.childContextTypes.skin,
  translate: _provider.default.childContextTypes.translate
};
var _default = exports.default = StarsSummary;
//# sourceMappingURL=stars-summary.js.map