'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _reactFontawesome2 = _interopRequireDefault(_reactFontawesome);

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

var _utils = require('views/services/utils');

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

const { config, i18n, $ } = window;
const __ = i18n.setting.__.bind(i18n.setting);
const webview = $('kan-game webview');
const wvStatus = {
  Loading: 0,
  Loaded: 1,
  Failed: 2
};

class NavigatorBar extends _react2.default.Component {
  constructor() {
    super();

    this.onStartLoading = e => {
      this.setState({
        status: wvStatus.Loading
      });
    };

    this.onStopLoading = e => {
      this.setState({
        status: wvStatus.Loaded,
        url: webview.getURL()
      });
    };

    this.onFailLoad = e => {
      this.setState({
        status: wvStatus.Failed
      });
    };

    this.onWillNavigate = e => {
      this.setState({
        url: e.url
      });
    };

    this.onChangeUrl = e => {
      this.setState({
        url: e.target.value
      });
    };

    this.onKeydown = e => {
      if (e.keyCode === 13) {
        this.navigate(this.state.url);
      }
    };

    this.onClickNavigate = e => {
      this.navigate(this.state.url);
    };

    this.onClickStop = e => {
      webview.stop();
    };

    this.onClickHomepage = e => {
      config.set('poi.homepage', this.state.url);
    };

    this.onRightClickHomepage = e => {
      this.navigate(config.get('poi.homepage'));
    };

    config.setDefault('poi.homepage', 'http://www.dmm.com/netgame/social/application/-/detail/=/app_id=854854/');
    this.state = {
      status: 1,
      url: config.get('poi.homepage')
    };
  }
  componentDidMount() {
    webview.addEventListener('did-start-loading', this.onStartLoading);
    webview.addEventListener('did-stop-loading', this.onStopLoading);
    webview.addEventListener('did-fail-load', this.onFailLoad);
    webview.addEventListener('will-navigate', this.onWillNavigate);
  }
  componentWillUnmount() {
    webview.removeEventListener('did-start-loading', this.onStartLoading);
    webview.removeEventListener('did-stop-loading', this.onStopLoading);
    webview.removeEventListener('did-fail-load', this.onFailLoad);
    webview.removeEventListener('will-navigate', this.onWillNavigate);
  }
  // Webview Event

  // UI Interaction
  navigate(url) {
    if (!(url.startsWith('http://') || url.startsWith('https://'))) {
      url = `http://${this.state.url}`;
    }
    webview.loadURL(url);
    this.setState({
      url: url
    });
  }


  render() {
    const { status } = this.state;

    let statusIcon;
    if (status === wvStatus.Loading) {
      statusIcon = _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(_reactFontawesome2.default, { name: 'spinner', pulse: true })
      );
    }
    if (status === wvStatus.Failed) {
      statusIcon = _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(_reactFontawesome2.default, { name: 'times' })
      );
    }

    let navigateAction, navigateIcon;
    if (status === wvStatus.Loading) {
      navigateAction = this.onClickStop;
      navigateIcon = _react2.default.createElement(_reactFontawesome2.default, { name: 'times' });
    } else {
      navigateAction = this.onClickNavigate;
      navigateIcon = _react2.default.createElement(_reactFontawesome2.default, { name: 'arrow-right' });
    }

    return _react2.default.createElement(
      'div',
      { className: 'navigator' },
      _react2.default.createElement(
        'div',
        { className: 'navigator-url' },
        _react2.default.createElement(
          _reactBootstrap.FormGroup,
          null,
          _react2.default.createElement(
            _reactBootstrap.InputGroup,
            { bsSize: 'small', style: { width: '100%' } },
            _react2.default.createElement(_reactBootstrap.FormControl, { type: 'text',
              placeholder: __('Input address'),
              className: statusIcon ? 'navigator-status' : 'navigator-no-status',
              value: this.state.url,
              onChange: this.onChangeUrl,
              onKeyDown: this.onKeydown }),
            statusIcon ? _react2.default.createElement(
              _reactBootstrap.FormControl.Feedback,
              null,
              statusIcon
            ) : null
          )
        )
      ),
      _react2.default.createElement(
        'div',
        { className: 'navigator-btn' },
        _react2.default.createElement(
          _reactBootstrap.ButtonGroup,
          null,
          _react2.default.createElement(
            _reactBootstrap.Button,
            { bsSize: 'small', bsStyle: 'primary', onClick: navigateAction },
            navigateIcon
          ),
          _react2.default.createElement(
            _reactBootstrap.Button,
            { bsSize: 'small', bsStyle: 'warning', onClick: _utils.gameRefreshPage, onContextMenu: _utils.gameReloadFlash },
            _react2.default.createElement(_reactFontawesome2.default, { name: 'refresh' })
          )
        ),
        _react2.default.createElement(
          _reactBootstrap.ButtonGroup,
          { style: { marginLeft: 5 } },
          _react2.default.createElement(
            _reactBootstrap.OverlayTrigger,
            { placement: 'top', overlay: _react2.default.createElement(
                _reactBootstrap.Tooltip,
                { id: 'nav-homepage' },
                __('Set as homepage')
              ) },
            _react2.default.createElement(
              _reactBootstrap.Button,
              { bsSize: 'small', onClick: this.onClickHomepage, onContextMenu: this.onRightClickHomepage },
              _react2.default.createElement(_reactFontawesome2.default, { name: 'bookmark' })
            )
          )
        )
      )
    );
  }
}

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