import _noop from "lodash/fp/noop";
import _isEmpty from "lodash/fp/isEmpty";
import _get from "lodash/fp/get";
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Provider from '../provider';
import Loader from '../loader';
import Cta from '../cta';
import style from './style.css';
const LoadedClue = ({
  text
}) => {
  return /*#__PURE__*/React.createElement("div", {
    "data-name": "text",
    className: style.clueText
  }, /*#__PURE__*/React.createElement("div", {
    // eslint-disable-next-line react/no-danger
    dangerouslySetInnerHTML: {
      __html: text
    }
  }));
};
LoadedClue.propTypes = process.env.NODE_ENV !== "production" ? {
  text: PropTypes.string
} : {};
class Clue extends React.Component {
  static contextTypes = {
    skin: Provider.childContextTypes.skin,
    translate: Provider.childContextTypes.translate
  };
  static getDerivedStateFromProps(props) {
    const {
      text
    } = props;
    const isLoading = _isEmpty(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 = _noop
    } = this.props;
    onClick(e);
    const isLoading = _isEmpty(text);
    return this.setState({
      isLoading
    });
  }
  render() {
    const {
      text,
      starsDiff
    } = this.props;
    const {
      skin,
      translate
    } = this.context;
    const {
      isLoading
    } = this.state;
    const primaryColor = _get('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.createElement("div", {
      "data-name": "clue",
      className: style.wrapperClue
    }, /*#__PURE__*/React.createElement("div", {
      className: classnames(style.clueCard, !_isEmpty(text) && style.flip)
    }, /*#__PURE__*/React.createElement("div", {
      className: style.back,
      style: inlineStyle,
      "data-name": "clue-back-side"
    }, isLoading ? /*#__PURE__*/React.createElement(Loader, null) : null, /*#__PURE__*/React.createElement("div", {
      className: classnames(style.backContent, isLoading && style.loading)
    }, /*#__PURE__*/React.createElement("div", {
      className: style.stars
    }, starsToLoose), /*#__PURE__*/React.createElement(Cta, {
      submitValue: seeClueCta,
      secondary: true,
      light: true,
      onClick: this.handleClick
    }))), /*#__PURE__*/React.createElement("div", {
      className: style.front,
      style: inlineStyle
    }, /*#__PURE__*/React.createElement(LoadedClue, {
      text: text
    }))));
  }
}
Clue.propTypes = process.env.NODE_ENV !== "production" ? {
  text: LoadedClue.propTypes.text,
  onClick: Cta.propTypes.onClick,
  starsDiff: PropTypes.number
} : {};
export default Clue;
//# sourceMappingURL=index.js.map