'use strict';

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

var _class, _temp;

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

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

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _lodash = require('lodash');

var _reselect = require('reselect');

var _minishippane = require('./minishippane');

var _landbaseButton = require('../../ship-parts/landbase-button');

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

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

const { dbg, i18n, dispatch } = window;
const __ = i18n.main.__.bind(i18n.main);
const { Component } = _react2.default;

function getStyle(state, disabled) {
  if (state >= 0 && state <= 5 && !disabled)
    // 0: Cond >= 40, Supplied, Repaired, In port
    // 1: 20 <= Cond < 40, or not supplied, or medium damage
    // 2: Cond < 20, or heavy damage
    // 3: Repairing
    // 4: In mission
    // 5: In map
    return ['success', 'warning', 'danger', 'info', 'primary', 'default'][state];else return 'default';
}

const fleetNames = [`${__('I')}`, `${__('II')}`, `${__('III')}`, `${__('IV')}`];

const shipViewSwitchButtonDataSelectorFactory = (0, _lodash.memoize)(fleetId => (0, _reselect.createSelector)([(0, _selectors.fleetStateSelectorFactory)(fleetId)], fleetState => ({
  fleetState
})));

const ShipViewSwitchButton = (0, _reactRedux.connect)((state, { fleetId }) => shipViewSwitchButtonDataSelectorFactory(fleetId)(state))(({ fleetId, activeFleetId, fleetState, onClick, disabled }) => _react2.default.createElement(
  _reactBootstrap.Button,
  {
    bsSize: 'xsmall',
    bsStyle: getStyle(fleetState, disabled),
    onClick: onClick,
    disabled: disabled,
    className: fleetId == activeFleetId ? 'active' : ''
  },
  fleetNames[fleetId]
));

exports.default = (0, _reactRedux.connect)((state, props) => ({
  enableTransition: (0, _lodash.get)(state, 'config.poi.transition.enable', true),
  fleetCount: (0, _lodash.get)(state, 'info.fleets.length', 4),
  activeFleetId: (0, _lodash.get)(state, 'ui.activeFleetId', 0)
}))((_temp = _class = class MiniShip extends Component {

  constructor(props) {
    super(props);

    this.handleClick = idx => {
      if (idx != this.props.activeFleetId) {
        dispatch({
          type: '@@TabSwitch',
          tabInfo: {
            activeFleetId: idx
          }
        });
      }
    };

    this.changeShipView = () => {
      dispatch({
        type: '@@TabSwitch',
        tabInfo: {
          activeMainTab: 'shipView'
        }
      });
    };

    this.nowTime = 0;
  }

  componentWillUpdate(nextProps, nextState) {
    this.nowTime = new Date().getTime();
  }
  componentDidUpdate(prevProps, prevState) {
    const cur = Date.now();
    dbg.extra('moduleRenderCost').log(`the cost of mini-ship-module render: ${cur - this.nowTime}ms`);
  }

  render() {
    return _react2.default.createElement(
      'div',
      { style: { height: '100%' }, onDoubleClick: this.changeShipView },
      _react2.default.createElement(
        _reactBootstrap.Panel,
        { id: 'ShipViewMini', bsStyle: 'default', style: { minHeight: 322, height: 'calc(100% - 6px)' } },
        _react2.default.createElement('link', { rel: 'stylesheet', href: (0, _pathExtra.join)(__dirname, '..', 'assets', 'miniship.css') }),
        _react2.default.createElement(
          'div',
          { className: 'panel-row' },
          _react2.default.createElement(
            _reactBootstrap.ButtonGroup,
            { bsSize: 'xsmall' },
            [0, 1, 2, 3].map(i => _react2.default.createElement(ShipViewSwitchButton, {
              key: i,
              fleetId: i,
              disabled: i + 1 > this.props.fleetCount,
              onClick: this.handleClick.bind(this, i),
              activeFleetId: this.props.activeFleetId
            }))
          ),
          _react2.default.createElement(
            _reactBootstrap.ButtonGroup,
            { bsSize: 'xsmall', className: 'plane-button-mini' },
            _react2.default.createElement(_landbaseButton.LandbaseButton, { key: 4,
              fleetId: 4,
              disabled: this.props.airBaseCnt === 0,
              onClick: e => this.handleClick(4),
              activeFleetId: this.props.activeFleetId,
              isMini: true
            })
          )
        ),
        _react2.default.createElement(
          'div',
          { className: 'no-scroll' },
          _react2.default.createElement(
            'div',
            { className: (0, _classnames2.default)("ship-tab-content", { 'ship-tab-content-transition': this.props.enableTransition }),
              style: { transform: `translateX(-${this.props.activeFleetId}00%)` } },
            [0, 1, 2, 3].map(i => _react2.default.createElement(
              'div',
              { className: 'ship-deck ship-tabpane', key: i },
              _react2.default.createElement(_minishippane.PaneBodyMini, {
                key: i,
                fleetId: i
              })
            )),
            _react2.default.createElement(
              'div',
              { className: 'ship-deck ship-tabpane', key: 4 },
              _react2.default.createElement(_minishippane.LBViewMini, null)
            )
          )
        )
      )
    );
  }
}, _class.propTypes = {
  enableTransition: _propTypes2.default.bool.isRequired,
  fleetCount: _propTypes2.default.number.isRequired,
  activeFleetId: _propTypes2.default.number.isRequired
}, _temp));
module.exports = exports['default'];