'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

var _reactRouter = require('react-router');

var _index = require('../../constants/index');

var _stringProcessor = require('../../lib/string-processor');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _iconNavbarClose = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjIwcHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDIwIDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOSAoMzE2NjcpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPmljb24tbmF2YmFyLWNsb3NlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9Ik1vYmlsZSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkFydGljbGUt4oCTLVRvcGljLVRPQy3igJMtTW9iaWxlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjc0LjAwMDAwMCwgLTI2LjAwMDAwMCkiIGZpbGw9IiM3RjdGN0YiPgogICAgICAgICAgICA8ZyBpZD0iTmF2LUJhciI+CiAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iaWNvbi1uYXZiYXItY2xvc2UiIHBvaW50cz0iMjk0IDQyLjgyMzMzMzMgMjg3LjA3MDgzMyAzNS45ODI1IDI5My45MDQxNjcgMjkuMDgwODMzMyAyOTAuODIzMzMzIDI2IDI4My45OCAzMi45MzE2NjY3IDI3Ny4wNTUgMjYuMDk1ODMzMyAyNzQgMjkuMTUwODMzMyAyODAuOTM0MTY3IDM2LjAxNzUgMjc0LjA5NTgzMyA0Mi45NDUgMjc3LjE1MDgzMyA0NiAyODQuMDE1IDM5LjA2ODMzMzMgMjkwLjkxOTE2NyA0NS45MDQxNjY3Ij48L3BvbHlnb24+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==";

var _iconNavbarClose2 = _interopRequireDefault(_iconNavbarClose);

var _reactLazyLoad = require('react-lazy-load');

var _reactLazyLoad2 = _interopRequireDefault(_reactLazyLoad);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _TopicPopup = {
  "popup": "TopicPopup__popup___3AKxa",
  "fade-in-down": "TopicPopup__fade-in-down___1tR55",
  "topic-wrapper": "TopicPopup__topic-wrapper___28siN",
  "current": "TopicPopup__current___-roSB",
  "open": "TopicPopup__open___2sxw4",
  "close": "TopicPopup__close___3LVHI",
  "closeBtn": "TopicPopup__closeBtn___1OCE0",
  "topic-title": "TopicPopup__topic-title___2hRuL",
  "list-outer": "TopicPopup__list-outer___rjowd",
  "article-title": "TopicPopup__article-title___3b6ly",
  "article-desc": "TopicPopup__article-desc___1NyDD",
  "continue": "TopicPopup__continue___2US1I",
  "topic": "TopicPopup__topic___qwD6m",
  "img-outer": "TopicPopup__img-outer___17mOv",
  "img-box": "TopicPopup__img-box___FELGv",
  "crop": "TopicPopup__crop___2Auc4",
  "text-box": "TopicPopup__text-box___1VYvn",
  "fade-in": "TopicPopup__fade-in___3ltva",
  "fade-out": "TopicPopup__fade-out___3A9zy",
  "fade-in-up": "TopicPopup__fade-in-up___126Dm",
  "fade-out-down": "TopicPopup__fade-out-down___33yyM",
  "fade-in-left": "TopicPopup__fade-in-left___3t8gg",
  "fade-out-left": "TopicPopup__fade-out-left___2Jkps",
  "fade-in-right": "TopicPopup__fade-in-right___1lh7f",
  "fade-out-right": "TopicPopup__fade-out-right___3A1WB"
};

var _TopicPopup2 = _interopRequireDefault(_TopicPopup);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
//import commonStyles from '../article/Common.scss'


var Topic = function Topic(props) {
  var data = props.data;
  var articleId = props.articleId;

  var isCurrentViewing = _lodash2.default.get(data, 'id', '') === articleId;
  var link = _index.LINK_PREFIX.ARTICLE + _lodash2.default.get(data, 'slug', '');
  var heroImgUrl = _lodash2.default.get(data, ['heroImage', 'image', 'resizedTargets', 'mobile', 'url'], null);
  var currentClass = isCurrentViewing ? _TopicPopup2.default['current'] : null;

  var topic = _react2.default.createElement(
    'div',
    { className: (0, _classnames2.default)(_TopicPopup2.default['topic'], currentClass) },
    _react2.default.createElement(
      'div',
      { className: _TopicPopup2.default['img-outer'] },
      _react2.default.createElement(
        'div',
        { className: _TopicPopup2.default['img-box'] },
        _react2.default.createElement(
          _reactLazyLoad2.default,
          null,
          _react2.default.createElement('img', { className: _TopicPopup2.default['crop'], src: heroImgUrl })
        )
      )
    ),
    _react2.default.createElement(
      'div',
      { className: _TopicPopup2.default['text-box'] },
      _react2.default.createElement(
        'h3',
        { className: _TopicPopup2.default['article-title'] },
        data.title
      ),
      _react2.default.createElement(
        'p',
        { className: _TopicPopup2.default['article-desc'] },
        (0, _stringProcessor.shortenString)(data.ogDescription, _index.CHARACTERS_LIMIT.TOPIC_DESC)
      )
    )
  );
  var topicBox = isCurrentViewing ? _react2.default.createElement(
    'div',
    null,
    ' ',
    topic,
    ' '
  ) : _react2.default.createElement(
    _reactRouter.Link,
    { to: link },
    ' ',
    topic,
    ' '
  );

  return _react2.default.createElement(
    'div',
    { className: 'col-md-12 col-lg-6' },
    topicBox
  );
};

var TopicPopup = function (_Component) {
  _inherits(TopicPopup, _Component);

  function TopicPopup(props, context) {
    _classCallCheck(this, TopicPopup);

    return _possibleConstructorReturn(this, (TopicPopup.__proto__ || Object.getPrototypeOf(TopicPopup)).call(this, props, context));
  }

  _createClass(TopicPopup, [{
    key: 'render',
    value: function render() {
      var _props = this.props;
      var isOpen = _props.isOpen;
      var onTopicBtnClick = _props.onTopicBtnClick;
      var pageTopic = _props.pageTopic;
      var topicArr = _props.topicArr;
      var articleId = _props.articleId;

      var uniqTopics = _lodash2.default.uniq(topicArr);
      var displayClass = isOpen ? _TopicPopup2.default.open : _TopicPopup2.default.close;
      var topicList = [];

      for (var i = 0; i < uniqTopics.length; i++) {
        topicList.push(_react2.default.createElement(Topic, { key: i, data: uniqTopics[i], articleId: articleId }));
      }

      return _react2.default.createElement(
        'div',
        { className: (0, _classnames2.default)(_TopicPopup2.default.popup, displayClass) },
        _react2.default.createElement(
          'div',
          { className: _TopicPopup2.default.closeBtn, onClick: onTopicBtnClick },
          _react2.default.createElement('img', { src: _iconNavbarClose2.default })
        ),
        _react2.default.createElement(
          'div',
          { className: _TopicPopup2.default['topic-wrapper'] },
          _react2.default.createElement(
            'div',
            { className: (0, _classnames2.default)('container', _TopicPopup2.default['list-outer']) },
            _react2.default.createElement(
              'div',
              { className: 'row text-center' },
              _react2.default.createElement(
                'h2',
                { className: _TopicPopup2.default['topic-title'] },
                ' ',
                pageTopic,
                ' '
              )
            ),
            _react2.default.createElement(
              'div',
              { className: 'row' },
              topicList
            )
          )
        )
      );
    }
  }]);

  return TopicPopup;
}(_react.Component);

exports.default = TopicPopup;


TopicPopup.propTypes = {
  isOpen: _react2.default.PropTypes.bool,
  onTopicBtnClick: _react2.default.PropTypes.func,
  pageTopic: _react2.default.PropTypes.string,
  topicArr: _react2.default.PropTypes.array
};

TopicPopup.defaultProps = {
  isOpen: false,
  onTopicBtnClick: null,
  pageTopic: '',
  topicArr: []
};