import _map from "lodash/fp/map";
import _isEmpty from "lodash/fp/isEmpty";
import _getOr from "lodash/fp/getOr";
import _get from "lodash/fp/get";
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); }
import React, { useCallback, useMemo, useState } from 'react';
import PropTypes from 'prop-types';
import { NovaCompositionNavigationArrowLeft as ArrowLeft, NovaCompositionNavigationArrowRight as ArrowRight, NovaCompositionCoorpacademyStar as StarIcon } from '@coorpacademy/nova-icons';
import Provider, { GetSkinFromContext } from '../../atom/provider';
import EngineStars from './engine-stars';
import style from './stars-summary.css';
const EngineTab = ({
  engine,
  engineIndex,
  firstItemIndex
}) => {
  const {
    type
  } = engine;
  const state = useMemo(() => engineIndex < firstItemIndex ? 'hidden' : 'active', [engineIndex, firstItemIndex]);
  const dataName = useMemo(() => `${type}_total_${state}`, [state, type]);
  return /*#__PURE__*/React.createElement("li", {
    className: style[state],
    key: type,
    "data-name": dataName
  }, /*#__PURE__*/React.createElement(EngineStars, _extends({}, engine, {
    key: type,
    className: engineIndex < firstItemIndex ? style.hidden : style.active
  })));
};
EngineTab.propTypes = process.env.NODE_ENV !== "production" ? {
  engine: PropTypes.shape(EngineStars.propTypes),
  engineIndex: PropTypes.number,
  firstItemIndex: PropTypes.number
} : {};
const EngineTabs = ({
  engines,
  firstItemIndex
}) => {
  return useMemo(() => _map.convert({
    cap: false
  })((engine, index) => /*#__PURE__*/React.createElement(EngineTab, {
    engine: engine,
    key: `engineTab_${index}`,
    firstItemIndex: firstItemIndex,
    engineIndex: index
  }), engines), [engines, firstItemIndex]);
};
EngineTabs.propTypes = process.env.NODE_ENV !== "production" ? {
  engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)),
  firstItemIndex: PropTypes.number
} : {};
const StarsSummary = (props, legacyContext) => {
  const {
    total,
    engines
  } = props;
  const skin = GetSkinFromContext(legacyContext);
  const [firstItemIndex, setFirstItemIndex] = useState(0);
  const [totalItems] = useState(engines.length);
  const dark = _getOr('#90A4AE', 'common.dark', skin);
  const primary = _get('common.primary', skin);
  const scrollTo = useCallback(page => setFirstItemIndex(page), []);
  const handleOnLeft = useCallback(() => {
    scrollTo(firstItemIndex - 1);
  }, [firstItemIndex, scrollTo]);
  const handleOnRight = useCallback(() => {
    scrollTo(firstItemIndex + 1);
  }, [firstItemIndex, scrollTo]);
  if (_isEmpty(engines)) {
    return null;
  }
  const leftArrowView = totalItems > 6 && firstItemIndex > 0 ? /*#__PURE__*/React.createElement("button", {
    className: style.circle,
    onClick: handleOnLeft,
    "data-name": "left-arrow",
    "data-testid": "stars-summary-left-arrow",
    type: "button"
  }, /*#__PURE__*/React.createElement(ArrowLeft, {
    style: {
      color: dark
    },
    className: style.left,
    width: 10,
    height: 10
  })) : null;
  const rightArrowView = totalItems > 6 && firstItemIndex < totalItems - 6 ? /*#__PURE__*/React.createElement("button", {
    className: style.circle,
    onClick: handleOnRight,
    "data-name": "right-arrow",
    "data-testid": "stars-summary-right-arrow",
    type: "button"
  }, /*#__PURE__*/React.createElement(ArrowRight, {
    style: {
      color: dark
    },
    className: style.right,
    width: 10,
    height: 10
  })) : null;
  return /*#__PURE__*/React.createElement("div", {
    "data-name": "myStars",
    className: style.myStars,
    tabIndex: 0
  }, /*#__PURE__*/React.createElement("div", {
    "data-name": "myStars-wrapper",
    className: style.myStarsWrapper,
    "data-testid": `stars-summary-engine-index-${firstItemIndex}`,
    tabIndex: 0
  }, /*#__PURE__*/React.createElement("ul", {
    className: style.allStars,
    "data-name": "engineList",
    "data-testid": "stars-summary-engine-tabs",
    tabIndex: 0
  }, /*#__PURE__*/React.createElement(EngineTabs, {
    engines: engines,
    firstItemIndex: firstItemIndex
  })), /*#__PURE__*/React.createElement("div", {
    className: style.footerSummaryStars,
    style: {
      backgroundColor: primary
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: style.totalStars
  }, /*#__PURE__*/React.createElement("span", null, total.label), /*#__PURE__*/React.createElement("p", {
    "data-name": "star-counter"
  }, total.stars), /*#__PURE__*/React.createElement("div", {
    className: style.iconBubble
  }, /*#__PURE__*/React.createElement(StarIcon, {
    className: style.iconHeader,
    style: {
      color: primary
    }
  }))), /*#__PURE__*/React.createElement("div", {
    className: style.navigationLeft
  }, leftArrowView), /*#__PURE__*/React.createElement("div", {
    className: style.navigationRight
  }, rightArrowView))));
};
StarsSummary.propTypes = process.env.NODE_ENV !== "production" ? {
  total: PropTypes.shape({
    label: PropTypes.string.isRequired,
    stars: PropTypes.number.isRequired
  }).isRequired,
  engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)).isRequired
} : {};
StarsSummary.contextTypes = {
  skin: Provider.childContextTypes.skin,
  translate: Provider.childContextTypes.translate
};
export default StarsSummary;
//# sourceMappingURL=stars-summary.js.map