import _omit from "lodash/fp/omit";
import _keys from "lodash/fp/keys";
import _getOr from "lodash/fp/getOr";
import _get from "lodash/fp/get";
import _isEmpty from "lodash/fp/isEmpty";
import _isNil from "lodash/fp/isNil";
import _defer from "lodash/fp/defer";
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, { Component } from 'react';
import PropTypes from 'prop-types';
import { NovaCompositionCoorpacademyCheck as CheckIcon, NovaLineInterfaceFeedbackInterfaceAlertCircle as AlertIcon } from '@coorpacademy/nova-icons';
import classnames from 'classnames';
import Loader from '../../../atom/loader';
import Link from '../../../atom/link';
import Provider from '../../../atom/provider';
import ResourceBrowser from '../../../organism/resource-browser';
import Accordion from '../../../organism/accordion/container';
import CMPopin from '../../../molecule/cm-popin';
import Header from '../popin-header';
import style from './style.css';
const extractTabs = items => _keys(items).map(type => {
  const item = items[type];
  return {
    iconType: type,
    title: item.title,
    isOpen: item.open
  };
});
const Resources = ({
  resources,
  overlay
}) => /*#__PURE__*/React.createElement("div", {
  className: style.browserWrapper
}, /*#__PURE__*/React.createElement(ResourceBrowser, {
  resources: resources.value,
  overlay: overlay,
  className: style.browser
}));
Resources.propTypes = process.env.NODE_ENV !== "production" ? {
  resources: PropTypes.shape({
    value: ResourceBrowser.propTypes.resources
  }),
  overlay: ResourceBrowser.propTypes.overlay
} : {};
const SimpleText = ({
  text
}) => /*#__PURE__*/React.createElement("div", {
  "data-name": "simpleText",
  className: style.simpleTextWrapper
}, /*#__PURE__*/React.createElement("p", {
  className: classnames(style.simpleText, style.innerHTML)
  // eslint-disable-next-line react/no-danger
  ,
  dangerouslySetInnerHTML: {
    __html: text
  }
}));
SimpleText.propTypes = process.env.NODE_ENV !== "production" ? {
  text: PropTypes.string
} : {};
const AssistanceLink = (props, context) => {
  if (_isEmpty(props)) return null;
  const {
    title,
    onClick
  } = props;
  if (_isEmpty(title)) return null;
  const {
    skin
  } = context;
  const white = _get('common.white', skin);
  return /*#__PURE__*/React.createElement("div", {
    className: style.wrapperAssistance,
    onClick: onClick
  }, /*#__PURE__*/React.createElement(AlertIcon, {
    className: style.alertIcon,
    style: {
      color: white
    }
  }), /*#__PURE__*/React.createElement("span", {
    className: style.titleLink
  }, " ", title, " "));
};
AssistanceLink.contextTypes = {
  skin: Provider.childContextTypes.skin
};
AssistanceLink.propTypes = process.env.NODE_ENV !== "production" ? {
  title: PropTypes.string,
  onClick: PropTypes.func
} : {};
const Question = ({
  header,
  answer,
  answerPrefix
}) => /*#__PURE__*/React.createElement("div", {
  className: style.question
}, /*#__PURE__*/React.createElement("p", {
  className: classnames(style.questionHeader, style.innerHTML)
  // eslint-disable-next-line react/no-danger
  ,
  dangerouslySetInnerHTML: {
    __html: header
  }
}), /*#__PURE__*/React.createElement("div", {
  className: style.answerWrapper
}, /*#__PURE__*/React.createElement(CheckIcon, {
  className: style.checkIcon
}), answerPrefix ? /*#__PURE__*/React.createElement("span", {
  className: style.answerPrefix
}, answerPrefix) : null, /*#__PURE__*/React.createElement("span", {
  className: classnames(style.answer, style.innerHTML)
  // eslint-disable-next-line react/no-danger
  ,
  dangerouslySetInnerHTML: {
    __html: answer
  }
})));
Question.propTypes = process.env.NODE_ENV !== "production" ? {
  header: PropTypes.string,
  answerPrefix: PropTypes.string,
  answer: PropTypes.string
} : {};
class PopinCorrection extends Component {
  static contextTypes = {
    skin: Provider.childContextTypes.skin
  };
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
    this.initWrapper = this.initWrapper.bind(this);
  }
  componentDidMount() {
    this.deferOpen();
  }
  deferOpen() {
    clearTimeout(this.deferedOpen);
    this.deferedOpen = _defer(() => {
      const {
        onOpen
      } = this.props;
      this.setState({
        open: true
      });
      onOpen && onOpen();
    });
  }
  initWrapper(wrapper) {
    this.wrapper = wrapper;
  }
  render() {
    const {
      header = {},
      extraLifeGranted,
      gameOver,
      question,
      overlay,
      resources,
      klf,
      tips,
      onClick,
      quit = {},
      assistanceLink = {},
      popinError
    } = this.props;
    const {
      open
    } = this.state;
    const {
      skin
    } = this.context;
    const primary = _getOr('#f0f', 'common.primary', skin);
    const tabs = extractTabs({
      resources,
      klf,
      tips
    });
    const isLoading = _isNil(header.failed);
    const className = open ? style.finalBackground : style.initialBackground;
    const {
      title,
      ...linkProps
    } = quit.cta || {};
    const quitCta = title || extraLifeGranted ? /*#__PURE__*/React.createElement(Link, _extends({}, linkProps, {
      style: {
        color: primary
      },
      className: extraLifeGranted ? style.hideQuitCta : style.quitCta,
      "data-name": "nextLink",
      "data-popin": "popinCorrection",
      "data-next": "quit-with-extra-life"
    }), title) : null;
    return /*#__PURE__*/React.createElement("div", {
      ref: this.initWrapper,
      className: className,
      "data-name": "popinCorrection"
    }, popinError ? /*#__PURE__*/React.createElement(CMPopin, popinError) : null, /*#__PURE__*/React.createElement("div", {
      className: style.scrollWrapper
    }, /*#__PURE__*/React.createElement("div", {
      className: isLoading ? style.loadingWrapper : style.wrapper
    }, /*#__PURE__*/React.createElement("div", {
      className: isLoading ? style.loadingContent : style.content
    }, /*#__PURE__*/React.createElement(Header, _extends({}, header, {
      gameOver: gameOver,
      extraLifeGranted: extraLifeGranted,
      animated: true
    })), /*#__PURE__*/React.createElement(Question, question), /*#__PURE__*/React.createElement(Accordion, {
      tabProps: tabs,
      onClick: onClick,
      oneTabOnly: true
    }, _isEmpty(_getOr([], 'value', resources)) ? null : /*#__PURE__*/React.createElement(Resources, {
      resources: resources,
      overlay: overlay
    }), klf.value ? /*#__PURE__*/React.createElement(SimpleText, {
      text: klf.value
    }) : null, tips.value ? /*#__PURE__*/React.createElement(SimpleText, {
      text: tips.value
    }) : null)), quitCta, /*#__PURE__*/React.createElement(AssistanceLink, assistanceLink)), isLoading ? /*#__PURE__*/React.createElement(Loader, {
      className: style.activeLoader
    }) : null));
  }
}
PopinCorrection.propTypes = process.env.NODE_ENV !== "production" ? {
  resources: Resources.propTypes.resources,
  overlay: ResourceBrowser.propTypes.overlay,
  assistanceLink: PropTypes.shape(AssistanceLink.propTypes),
  header: PropTypes.shape(_omit(['animated'], Header.propTypes)),
  extraLifeGranted: Header.propTypes.extraLifeGranted,
  gameOver: Header.propTypes.gameOver,
  question: PropTypes.shape(Question.propTypes),
  klf: PropTypes.shape(SimpleText.propTypes),
  tips: PropTypes.shape(SimpleText.propTypes),
  onClick: Accordion.propTypes.onClick,
  quit: PropTypes.shape({
    cta: PropTypes.shape({
      ...Link.propTypes,
      title: PropTypes.string
    })
  }),
  onOpen: PropTypes.func,
  popinError: PropTypes.shape(CMPopin.propTypes)
} : {};
export default PopinCorrection;
//# sourceMappingURL=index.js.map