"use strict";

exports.__esModule = true;
exports.default = void 0;
var _keys2 = _interopRequireDefault(require("lodash/fp/keys"));
var _get2 = _interopRequireDefault(require("lodash/fp/get"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _novaIcons = require("@coorpacademy/nova-icons");
var _provider = _interopRequireDefault(require("../../../../../atom/provider"));
var _style = _interopRequireDefault(require("./style.css"));
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 TABS = {
  question: {
    icon: _novaIcons.NovaCompositionCoorpacademyListBullets3
  },
  media: {
    icon: _novaIcons.NovaCompositionCoorpacademyFilterVideo2
  },
  clue: {
    icon: _novaIcons.NovaCompositionCoorpacademyClue
  },
  coach: {
    icon: _novaIcons.NovaCompositionCoorpacademyChat,
    className: _style.default.coach
  },
  context: {
    icon: _novaIcons.NovaCompositionCoorpacademyMap
  }
};
class Button extends _react.default.Component {
  static contextTypes = {
    skin: _provider.default.childContextTypes.skin
  };
  constructor(props, context) {
    super(props, context);
    this.state = {
      hovered: false
    };
  }
  handleMouseEnter = () => {
    const {
      onMouseEnter
    } = this.props;
    this.setState(prevState => ({
      hovered: true
    }));
    onMouseEnter && onMouseEnter();
  };
  handleMouseLeave = () => {
    const {
      onMouseLeave
    } = this.props;
    this.setState(prevState => ({
      hovered: false
    }));
    onMouseLeave && onMouseLeave();
  };
  render() {
    const {
      skin
    } = this.context;
    const {
      hovered
    } = this.state;
    const grey = (0, _get2.default)('common.grey', skin);
    const primaryColor = (0, _get2.default)('common.primary', skin);
    const {
      disabled,
      notify,
      selected,
      highlighted,
      title,
      type,
      onClick
    } = this.props;
    const colorIcon = selected ? primaryColor : grey;
    const selectedColor = selected && {
      borderTopColor: primaryColor
    } || {};
    const hoverStyle = !disabled && hovered ? {
      borderTopColor: primaryColor
    } : {};
    const IconType = (0, _get2.default)([type, 'icon'], TABS);
    const className = (0, _classnames.default)(_style.default.button, (0, _get2.default)([type, 'className'], TABS), selected && _style.default.selected, disabled && _style.default.disabled);
    const notifyView = notify ? /*#__PURE__*/_react.default.createElement("span", {
      className: _style.default.notify
    }) : null;
    return /*#__PURE__*/_react.default.createElement("div", {
      "data-name": `button`,
      "data-type": type,
      "data-selected": selected,
      "data-disabled": disabled,
      className: className,
      onClick: onClick,
      onMouseEnter: this.handleMouseEnter,
      onMouseLeave: this.handleMouseLeave,
      style: {
        ...hoverStyle,
        ...selectedColor
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: highlighted ? _style.default.highlighted : _style.default.logo
    }, notifyView, /*#__PURE__*/_react.default.createElement(IconType, {
      style: {
        color: colorIcon
      },
      height: 30
    })), /*#__PURE__*/_react.default.createElement("div", {
      "data-name": "title",
      className: _style.default.title
    }, title));
  }
}
Button.propTypes = process.env.NODE_ENV !== "production" ? {
  disabled: _propTypes.default.bool,
  notify: _propTypes.default.bool,
  selected: _propTypes.default.bool,
  highlighted: _propTypes.default.bool,
  title: _propTypes.default.string,
  type: _propTypes.default.oneOf((0, _keys2.default)(TABS)).isRequired,
  onMouseEnter: _propTypes.default.func,
  onMouseLeave: _propTypes.default.func,
  onClick: _propTypes.default.func
} : {};
const SlidesFooter = props => {
  const {
    buttons = []
  } = props;
  if (buttons.length === 0) return null;
  const Buttons = buttons.map((button, key) => {
    return /*#__PURE__*/_react.default.createElement(Button, _extends({}, button, {
      key: key
    }));
  });
  return /*#__PURE__*/_react.default.createElement("nav", {
    "data-name": "slidesFooter",
    className: _style.default.wrapper
  }, Buttons);
};
SlidesFooter.propTypes = process.env.NODE_ENV !== "production" ? {
  buttons: _propTypes.default.arrayOf(_propTypes.default.shape({
    disabled: _propTypes.default.bool,
    notify: _propTypes.default.bool,
    selected: _propTypes.default.bool,
    highlighted: _propTypes.default.bool,
    title: _propTypes.default.string,
    type: _propTypes.default.oneOf((0, _keys2.default)(TABS)).isRequired,
    onMouseEnter: _propTypes.default.func,
    onMouseLeave: _propTypes.default.func,
    onClick: _propTypes.default.func
  }))
} : {};
var _default = exports.default = SlidesFooter;
//# sourceMappingURL=index.js.map