'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LandbaseSlotitems = exports.Slotitems = undefined;

var _pathExtra = require('path-extra');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reselect = require('reselect');

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

var _lodash = require('lodash');

var _reactFontawesome = require('react-fontawesome');

var _reactFontawesome2 = _interopRequireDefault(_reactFontawesome);

var _icon = require('views/components/etc/icon');

var _slotitemsData = require('./slotitems-data');

var _gameUtils = require('views/utils/game-utils');

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

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

const { i18n } = window;

function getBackgroundStyle() {
  return window.isDarkTheme ? { backgroundColor: 'rgba(33, 33, 33, 0.7)' } : { backgroundColor: 'rgba(255, 255, 255, 0.7)' };
}

const slotitemsDataSelectorFactory = (0, _lodash.memoize)(shipId => (0, _reselect.createSelector)([(0, _selectors.shipDataSelectorFactory)(shipId), (0, _selectors.shipEquipDataSelectorFactory)(shipId)], ([ship, $ship] = [{}, {}], equipsData) => ({
  api_maxeq: $ship.api_maxeq,
  equipsData,
  exslotUnlocked: ship.api_slot_ex != 0
})));

const landbaseSlotitemsDataSelectorFactory = (0, _lodash.memoize)(landbaseId => (0, _reselect.createSelector)([(0, _selectors.landbaseSelectorFactory)(landbaseId), (0, _selectors.landbaseEquipDataSelectorFactory)(landbaseId)], (landbase = {}, equipsData) => ({
  api_maxeq: (landbase.api_plane_info || []).map(l => l.api_max_count),
  api_cond: (landbase.api_plane_info || []).map(l => l.api_cond),
  api_state: (landbase.api_plane_info || []).map(l => l.api_state),
  equipsData
})));

const Slotitems = exports.Slotitems = (0, _reactRedux.connect)((state, { shipId }) => slotitemsDataSelectorFactory(shipId)(state))(function ({ api_maxeq, equipsData, exslotUnlocked }) {
  return _react2.default.createElement(
    'div',
    { className: 'slotitems' },
    equipsData && equipsData.map((equipData, equipIdx) => {
      const isExslot = equipIdx == equipsData.length - 1;
      if (isExslot && !equipData && !exslotUnlocked) {
        return _react2.default.createElement('div', { key: equipIdx });
      }
      const [equip, $equip, onslot] = equipData || [];
      const itemOverlay = equipData && _react2.default.createElement(
        _reactBootstrap.Tooltip,
        { id: `equip-${equip.api_id}` },
        _react2.default.createElement(
          'div',
          null,
          _react2.default.createElement(
            'div',
            null,
            i18n.resources.__(($equip || { api_name: '??' }).api_name),
            equip.api_level == null || equip.api_level == 0 ? undefined : _react2.default.createElement(
              'strong',
              { style: { color: '#45A9A5' } },
              ' ',
              _react2.default.createElement(_reactFontawesome2.default, { name: 'star' }),
              equip.api_level
            ),
            equip.api_alv && equip.api_alv >= 1 && equip.api_alv <= 7 && _react2.default.createElement('img', { className: 'alv-img', src: (0, _pathExtra.join)('assets', 'img', 'airplane', `alv${equip.api_alv}.png`) })
          ),
          $equip && (0, _slotitemsData.getItemData)($equip).map((data, propId) => _react2.default.createElement(
            'div',
            { key: propId },
            data
          ))
        )
      );

      const equipIconId = equipData ? $equip.api_type[3] : 0;
      const showOnslot = !equipData || isExslot || (0, _gameUtils.equipIsAircraft)($equip);
      const maxOnslot = isExslot ? 0 : api_maxeq[equipIdx];
      const onslotText = isExslot ? "+" : equipData ? onslot : maxOnslot;
      const onslotWarning = equipData && onslot < maxOnslot;
      const onslotClassName = (0, _classnames2.default)("slotitem-onslot", {
        'show': showOnslot,
        'hide': !showOnslot,
        'text-warning': onslotWarning
      });
      const itemSpan = _react2.default.createElement(
        'span',
        null,
        _react2.default.createElement(_icon.SlotitemIcon, { className: 'slotitem-img', slotitemId: equipIconId }),
        _react2.default.createElement(
          'span',
          { className: onslotClassName, style: getBackgroundStyle() },
          onslotText
        )
      );

      return _react2.default.createElement(
        'div',
        { key: equipIdx, className: 'slotitem-container' },
        itemOverlay ? _react2.default.createElement(
          _reactBootstrap.OverlayTrigger,
          { placement: 'left', overlay: itemOverlay },
          itemSpan
        ) : itemSpan
      );
    })
  );
});

const LandbaseSlotitems = exports.LandbaseSlotitems = (0, _reactRedux.connect)((state, { landbaseId }) => landbaseSlotitemsDataSelectorFactory(landbaseId)(state))(function ({ api_maxeq, api_cond, api_state, equipsData, isMini }) {
  return _react2.default.createElement(
    'div',
    { className: 'slotitems' },
    equipsData && equipsData.map((equipData, equipIdx) => {
      const [equip, $equip, onslot] = equipData || [];
      const equipIconId = equipData ? $equip.api_type[3] : 0;
      const showOnslot = !equipData || (0, _gameUtils.equipIsAircraft)($equip);
      const maxOnslot = api_maxeq[equipIdx];
      const onslotWarning = equipData && onslot < maxOnslot;
      const onslotText = equipData ? onslot : maxOnslot;
      const onslotClassName = (0, _classnames2.default)("slotitem-onslot", {
        'show': showOnslot && api_state[equipIdx] === 1,
        'hide': !showOnslot || api_state[equipIdx] !== 1,
        'text-warning': onslotWarning
      });
      const iconStyle = {
        opacity: api_state[equipIdx] === 2 ? 0.5 : null,
        filter: api_cond[equipIdx] > 1 ? `drop-shadow(0px 0px 4px ${api_cond[equipIdx] === 2 ? '#FB8C00' : '#E53935'})` : null
      };
      const itemOverlay = equipData && _react2.default.createElement(
        _reactBootstrap.Tooltip,
        { id: `equip-${equip.api_id}` },
        _react2.default.createElement(
          'div',
          null,
          _react2.default.createElement(
            'div',
            { style: { display: 'flex' } },
            i18n.resources.__(($equip || { api_name: '??' }).api_name),
            equip.api_level == null || equip.api_level == 0 ? undefined : _react2.default.createElement(
              'strong',
              { style: { color: '#45A9A5' } },
              ' ',
              _react2.default.createElement(_reactFontawesome2.default, { name: 'star' }),
              equip.api_level
            ),
            equip.api_alv && equip.api_alv >= 1 && equip.api_alv <= 7 && _react2.default.createElement('img', { className: 'alv-img', src: (0, _pathExtra.join)('assets', 'img', 'airplane', `alv${equip.api_alv}.png`) }),
            isMini && _react2.default.createElement(
              _reactBootstrap.Label,
              { className: onslotClassName, bsStyle: `${onslotWarning ? 'warning' : 'default'}` },
              onslotText
            )
          ),
          $equip && (0, _slotitemsData.getItemData)($equip).map((data, propId) => _react2.default.createElement(
            'div',
            { key: propId },
            data
          ))
        )
      );
      const itemSpan = _react2.default.createElement(
        'span',
        null,
        _react2.default.createElement(
          'span',
          { style: iconStyle },
          _react2.default.createElement(_icon.SlotitemIcon, { className: 'slotitem-img', slotitemId: equipIconId })
        ),
        !isMini && _react2.default.createElement(
          'span',
          { className: onslotClassName, style: getBackgroundStyle() },
          onslotText
        )
      );

      return _react2.default.createElement(
        'div',
        { key: equipIdx, className: 'slotitem-container' },
        itemOverlay ? _react2.default.createElement(
          _reactBootstrap.OverlayTrigger,
          { placement: 'left', overlay: itemOverlay },
          itemSpan
        ) : itemSpan
      );
    })
  );
});