import _keys from "lodash/fp/keys";
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 from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { NovaCompositionCoorpacademyFilterVideo2 as MediaIcon, NovaCompositionCoorpacademyClue as ClueIcon, NovaCompositionCoorpacademyMap as ContextIcon, NovaCompositionCoorpacademyChat as CoachIcon, NovaCompositionCoorpacademyListBullets3 as QuestionIcon } from '@coorpacademy/nova-icons';
import Provider from '../../../../../atom/provider';
import style from './style.css';
const TABS = {
  question: {
    icon: QuestionIcon
  },
  media: {
    icon: MediaIcon
  },
  clue: {
    icon: ClueIcon
  },
  coach: {
    icon: CoachIcon,
    className: style.coach
  },
  context: {
    icon: ContextIcon
  }
};
class Button extends React.Component {
  static contextTypes = {
    skin: Provider.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 = _get('common.grey', skin);
    const primaryColor = _get('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 = _get([type, 'icon'], TABS);
    const className = classnames(style.button, _get([type, 'className'], TABS), selected && style.selected, disabled && style.disabled);
    const notifyView = notify ? /*#__PURE__*/React.createElement("span", {
      className: style.notify
    }) : null;
    return /*#__PURE__*/React.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.createElement("div", {
      className: highlighted ? style.highlighted : style.logo
    }, notifyView, /*#__PURE__*/React.createElement(IconType, {
      style: {
        color: colorIcon
      },
      height: 30
    })), /*#__PURE__*/React.createElement("div", {
      "data-name": "title",
      className: style.title
    }, title));
  }
}
Button.propTypes = process.env.NODE_ENV !== "production" ? {
  disabled: PropTypes.bool,
  notify: PropTypes.bool,
  selected: PropTypes.bool,
  highlighted: PropTypes.bool,
  title: PropTypes.string,
  type: PropTypes.oneOf(_keys(TABS)).isRequired,
  onMouseEnter: PropTypes.func,
  onMouseLeave: PropTypes.func,
  onClick: PropTypes.func
} : {};
const SlidesFooter = props => {
  const {
    buttons = []
  } = props;
  if (buttons.length === 0) return null;
  const Buttons = buttons.map((button, key) => {
    return /*#__PURE__*/React.createElement(Button, _extends({}, button, {
      key: key
    }));
  });
  return /*#__PURE__*/React.createElement("nav", {
    "data-name": "slidesFooter",
    className: style.wrapper
  }, Buttons);
};
SlidesFooter.propTypes = process.env.NODE_ENV !== "production" ? {
  buttons: PropTypes.arrayOf(PropTypes.shape({
    disabled: PropTypes.bool,
    notify: PropTypes.bool,
    selected: PropTypes.bool,
    highlighted: PropTypes.bool,
    title: PropTypes.string,
    type: PropTypes.oneOf(_keys(TABS)).isRequired,
    onMouseEnter: PropTypes.func,
    onMouseLeave: PropTypes.func,
    onClick: PropTypes.func
  }))
} : {};
export default SlidesFooter;
//# sourceMappingURL=index.js.map