'use strict';

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

var _reactRedux = require('react-redux');

var _lodash = require('lodash');

var _reactBootstrap = require('react-bootstrap');

var _reselect = require('reselect');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _selectors = require('views/utils/selectors');

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

const { i18n } = window;
const __ = i18n.main.__.bind(i18n.main);

// Return [count, required]
function sumSubgoals(record) {
  if (!record) return [0, 0];
  let [count, required] = [0, 0];
  (0, _lodash.forEach)(record, (subgoal, key) => {
    if (subgoal && typeof subgoal === 'object') {
      count += subgoal.count;
      required += subgoal.required;
    }
  });
  return [count, required];
}

function getCategory(api_category) {
  switch (api_category) {
    case 0:
      return '#ffffff';
    case 1:
      return '#19BB2E';
    case 2:
    case 8:
      return '#e73939';
    case 3:
      return '#87da61';
    case 4:
      return '#16C2A3';
    case 5:
      return '#E2C609';
    case 6:
      return '#805444';
    case 7:
      return '#c792e8';
    default:
      return '#fff';
  }
}

function getStyleByProgress(quest) {
  if (!quest) return 'default';
  const { api_progress_flag, api_state } = quest;
  if (api_state == 3) return 'success';
  switch (api_progress_flag) {
    case 0:
      // Empty
      return 'warning';
    case 1:
      // 50%
      return 'primary';
    case 2:
      // 80%
      return 'info';
    default:
      return 'default';
  }
}

function progressLabelText(quest) {
  if (!quest) return '';
  const { api_progress_flag, api_state } = quest;
  if (api_state == 3) return __('Completed');
  switch (api_progress_flag) {
    case 1:
      // 50%
      return '50%';
    case 2:
      // 80%
      return '80%';
    default:
      // api_progress_flag == 0, which means empty progress
      return __('In progress');
  }
}

function getStyleByPercent(percent) {
  if (percent < 0.5) return 'warning';
  if (percent < 0.8) return 'primary';
  if (percent < 1) return 'info';
  return 'success';
}

function getToolTip(record) {
  return _react2.default.createElement(
    'div',
    null,
    (0, _lodash.values)(record).map((subgoal, idx) => subgoal && typeof subgoal === 'object' ? _react2.default.createElement(
      'div',
      { key: idx },
      i18n.data.__(subgoal.description),
      ' - ',
      subgoal.count,
      ' / ',
      subgoal.required
    ) : undefined)
  );
}

const TaskRowBase = (0, _reactRedux.connect)((0, _reselect.createSelector)([_selectors.configLayoutSelector, _selectors.configDoubleTabbedSelector], (layout, doubleTabbed) => ({
  leftOverlayPlacement: !doubleTabbed && layout == 'vertical' ? 'top' : 'left'
})))(function ({
  idx, // Mandatory: 0..5
  bulletColor = '#fff',
  leftLabel = '',
  leftOverlay,
  rightLabel = '',
  rightOverlay,
  rightBsStyle = 'success',
  leftOverlayPlacement
}) {
  return _react2.default.createElement(
    'div',
    { className: 'panel-item task-item' },
    _react2.default.createElement(
      _reactBootstrap.OverlayTrigger,
      {
        placement: leftOverlayPlacement,
        overlay: _react2.default.createElement(
          _reactBootstrap.Tooltip,
          { id: `task-quest-name-${idx}`, style: leftOverlay ? null : { display: 'none' } },
          leftOverlay
        )
      },
      _react2.default.createElement(
        'div',
        { className: 'quest-name' },
        _react2.default.createElement('span', { className: 'cat-indicator', style: { backgroundColor: bulletColor } }),
        leftLabel
      )
    ),
    _react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(
        _reactBootstrap.OverlayTrigger,
        {
          placement: 'left',
          overlay: _react2.default.createElement(
            _reactBootstrap.Tooltip,
            { id: `task-progress-${idx}`, style: rightOverlay ? null : { display: 'none' } },
            rightOverlay
          )
        },
        _react2.default.createElement(
          _reactBootstrap.Label,
          { className: 'quest-progress', bsStyle: rightBsStyle },
          rightLabel
        )
      )
    )
  );
});

const TaskRow = (0, _reactRedux.connect)((state, { quest }) => ({
  quest,
  record: (0, _lodash.get)(state, ['info', 'quests', 'records', quest.api_no]),
  translation: (0, _lodash.get)((0, _selectors.extensionSelectorFactory)('poi-plugin-quest-info')(state), ['quests', quest.api_no, 'condition']),
  wikiId: (0, _lodash.get)((0, _selectors.extensionSelectorFactory)('poi-plugin-quest-info')(state), ['quests', quest.api_no, 'wiki_id'])
}))(function ({ idx, quest, record, translation, wikiId }) {
  const questName = quest ? i18n.resources.__(quest.api_title || '') : '???';
  const questContent = translation ? translation : quest ? quest.api_detail.replace(/<br\s*\/?>/gi, '') : '...';
  const [count, required] = sumSubgoals(record);
  const progressBsStyle = record ? getStyleByPercent(count / required) : getStyleByProgress(quest);
  const progressLabel = record ? `${count} / ${required}` : progressLabelText(quest);
  const progressOverlay = record ? _react2.default.createElement(
    'div',
    null,
    getToolTip(record || {})
  ) : undefined;
  return _react2.default.createElement(TaskRowBase, {
    idx: idx,
    bulletColor: quest ? getCategory(quest.api_category) : '#fff',
    leftLabel: questName,
    leftOverlay: _react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(
        'strong',
        null,
        wikiId ? `${wikiId} - ` : '',
        questName
      ),
      _react2.default.createElement('br', null),
      questContent
    ),
    rightLabel: progressLabel,
    rightBsStyle: progressBsStyle,
    rightOverlay: progressOverlay
  });
});

const TaskPanel = (0, _reactRedux.connect)(({ info: { quests: { activeQuests, activeCapacity, activeNum } } }) => ({
  activeQuests,
  activeCapacity,
  activeNum
}))(function ({ activeQuests, activeCapacity, activeNum }) {
  return _react2.default.createElement(
    _reactBootstrap.Panel,
    { bsStyle: 'default' },
    [(0, _lodash.sortBy)((0, _lodash.map)((0, _lodash.values)(activeQuests), 'detail'), 'api_no').map((quest, idx) => _react2.default.createElement(TaskRow, {
      key: (quest || {}).api_no || idx,
      idx: idx,
      quest: quest
    })), (0, _lodash.range)(Object.keys(activeQuests).length, 6).map(idx => idx < activeNum ?
    // Need refreshing
    _react2.default.createElement(TaskRowBase, {
      key: idx,
      idx: idx,
      leftLabel: __('To be refreshed'),
      leftOverlay: __('Browse your quest list to let poi know your active quests')
    }) : idx < activeCapacity ?
    // Empty
    _react2.default.createElement(TaskRowBase, {
      key: idx,
      idx: idx,
      leftLabel: __('Empty quest')
    }) :
    // Can expand
    _react2.default.createElement(TaskRowBase, {
      key: idx,
      idx: idx,
      leftLabel: __('Locked'),
      leftOverlay: __('Increase your active quest limit with a "Headquarters Personnel".')
    }))]
  );
});

exports.default = TaskPanel;
module.exports = exports['default'];