"use strict";

exports.__esModule = true;
exports.default = void 0;
var _noop2 = _interopRequireDefault(require("lodash/fp/noop"));
var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
var _get2 = _interopRequireDefault(require("lodash/fp/get"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _provider = _interopRequireDefault(require("../provider"));
var _loader = _interopRequireDefault(require("../loader"));
var _cta = _interopRequireDefault(require("../cta"));
var _style = _interopRequireDefault(require("./style.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const LoadedClue = ({
  text
}) => {
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-name": "text",
    className: _style.default.clueText
  }, /*#__PURE__*/_react.default.createElement("div", {
    // eslint-disable-next-line react/no-danger
    dangerouslySetInnerHTML: {
      __html: text
    }
  }));
};
LoadedClue.propTypes = process.env.NODE_ENV !== "production" ? {
  text: _propTypes.default.string
} : {};
class Clue extends _react.default.Component {
  static contextTypes = {
    skin: _provider.default.childContextTypes.skin,
    translate: _provider.default.childContextTypes.translate
  };
  static getDerivedStateFromProps(props) {
    const {
      text
    } = props;
    const isLoading = (0, _isEmpty2.default)(text);
    if (isLoading) return null;
    return {
      isLoading
    };
  }
  constructor(props, context) {
    super(props, context);
    this.state = {
      isLoading: false
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(e) {
    e.stopPropagation();
    e.preventDefault();
    const {
      text,
      onClick = _noop2.default
    } = this.props;
    onClick(e);
    const isLoading = (0, _isEmpty2.default)(text);
    return this.setState({
      isLoading
    });
  }
  render() {
    const {
      text,
      starsDiff
    } = this.props;
    const {
      skin,
      translate
    } = this.context;
    const {
      isLoading
    } = this.state;
    const primaryColor = (0, _get2.default)('common.primary', skin);
    const inlineStyle = {
      backgroundColor: primaryColor
    };
    const starsToLoose = translate('clue_stars_to_loose', {
      count: Math.abs(starsDiff)
    });
    const seeClueCta = translate('See clue');
    return /*#__PURE__*/_react.default.createElement("div", {
      "data-name": "clue",
      className: _style.default.wrapperClue
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _classnames.default)(_style.default.clueCard, !(0, _isEmpty2.default)(text) && _style.default.flip)
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.back,
      style: inlineStyle,
      "data-name": "clue-back-side"
    }, isLoading ? /*#__PURE__*/_react.default.createElement(_loader.default, null) : null, /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _classnames.default)(_style.default.backContent, isLoading && _style.default.loading)
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.stars
    }, starsToLoose), /*#__PURE__*/_react.default.createElement(_cta.default, {
      submitValue: seeClueCta,
      secondary: true,
      light: true,
      onClick: this.handleClick
    }))), /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.front,
      style: inlineStyle
    }, /*#__PURE__*/_react.default.createElement(LoadedClue, {
      text: text
    }))));
  }
}
Clue.propTypes = process.env.NODE_ENV !== "production" ? {
  text: LoadedClue.propTypes.text,
  onClick: _cta.default.propTypes.onClick,
  starsDiff: _propTypes.default.number
} : {};
var _default = exports.default = Clue;
//# sourceMappingURL=index.js.map