'use strict';

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

var _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _electron = require('electron');

var _lodash = require('lodash');

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

const { $, config } = window;
const { Component } = _react2.default;
const __ = window.i18n.others.__.bind(window.i18n.others);

const alertStyle = document.createElement('style');
const historyStyle = document.createElement('style');
alertStyle.innerHTML = `
  poi-alert {
    height: 30px;
  }
  #alert-main {
    height: 29px;
  }
`;
historyStyle.innerHTML = `
  .alert-history {
    transform: translateY(1px);
    pointer-events: 'none';
  }
`;

_electron.remote.getCurrentWindow().webContents.on('dom-ready', function (e) {
  document.body.appendChild(alertStyle);
  document.body.appendChild(historyStyle);
});

const initState = {
  overflow: false,
  history: [0, 1, 2, 3, 4].map(index => _react2.default.createElement(
    'div',
    { key: index++, className: 'alert alert-default alert-history-contents' },
    '\u3000'
  )),
  current: {
    type: 'default',
    content: __('Waiting for response...'),
    priority: 0,
    options: {
      dontReserve: true
    }
  }
};

let stickyEnd = Date.now();
let updateTime = 0;

const pushToHistory = (history, toPush) => {
  history.push(_react2.default.createElement(
    'div',
    { key: Date.now(), className: `alert alert-${toPush.type} alert-history-contents` },
    toPush.content
  ));
  if (history.length > 5) {
    history.shift();
  }
  return history;
};

const PoiAlert = exports.PoiAlert = (_temp = _class = class poiAlert extends Component {
  constructor(props) {
    super(props);

    this.shouldComponentUpdate = (nextProps, nextState) => {
      return nextState !== this.state;
    };

    this.toggleHistory = () => {
      this.showHistory = !this.showHistory;
      historyStyle.innerHTML = `
      #alert-main {
      }
      .alert-history {
        transform: translateY(${this.showHistory ? -this.alertHeight - this.historyHeight + 1 : 1 * Math.ceil(config.get('poi.zoomLevel', 1))}px);
        pointer-events: ${this.showHistory ? 'auto' : 'none'};
      }
    `;
    };

    this.handleStyleChange = () => {
      setTimeout(() => {
        try {
          const alertHeight = $('poi-control').offsetHeight;
          const historyHeight = this.alertHistory.offsetHeight;
          const bgColor = window.getComputedStyle($('body')).backgroundColor;
          if (historyHeight === this.historyHeight && alertHeight === this.alertHeight && bgColor === this.bgColor) {
            return;
          }
          this.alertHeight = alertHeight;
          this.historyHeight = historyHeight;
          this.bgColor = bgColor;
        } catch (error) {
          this.alertHeight = 30;
          this.historyHeight = 152;
        }
        alertStyle.innerHTML = `
        poi-alert {
          height: ${this.alertHeight}px;
        }
        #alert-container.alert-default, .alert-history.panel {
          background-color: ${this.bgColor};
        }
        .alert-default {
          ${window.theme == 'paper' || window.theme == 'lumen' ? 'color: #000;' : ''}
        }
        #alert-main {
          height: 29px;
        }
      `;
      }, 100);
    };

    this.handleAddAlert = e => {
      const value = Object.assign({
        type: 'default',
        content: '',
        priority: 0
      }, e.detail);
      let { history, current } = this.state;
      const nowTS = Date.now();
      if (value.priority < current.priority && nowTS < stickyEnd) {
        if (!value.dontReserve) {
          // Old message has higher priority, push new message to history
          history = pushToHistory(history, value);
          this.setState({ history });
        }
      } else if (!current.dontReserve) {
        // push old message to history
        updateTime = value.stickyFor || 3000;
        history = pushToHistory(history, current);
        this.setState({
          history: history,
          current: value,
          overflow: false
        });
      } else {
        updateTime = value.stickyFor || 3000;
        this.setState({
          current: value,
          overflow: false
        });
      }
    };

    this.handleOverflow = () => {
      const containerWidth = $('poi-alert').offsetWidth;
      if (!this.state.overflow) {
        this.msgWidth = this.alertArea.offsetWidth;
        this.alertPosition.style.width = `${this.msgWidth}px`;
      }
      if (this.msgWidth > containerWidth && !this.state.overflow) {
        this.alertPosition.style.width = `${this.msgWidth + 50}px`;
        this.setState({ overflow: true });
      } else if (this.msgWidth < containerWidth && this.state.overflow) {
        this.alertPosition.style.width = `${this.msgWidth}px`;
        this.setState({ overflow: false });
      }
    };

    this.componentWillUpdate = (nextProps, nextState) => {
      stickyEnd = Date.now() + updateTime;
      updateTime = 0;
    };

    this.componentDidUpdate = (prevProps, prevState) => {
      this.handleStyleChange();
    };

    this.componentDidMount = () => {
      config.addListener('config.set', (path, value) => {
        if (path === 'poi.theme') {
          this.handleStyleChange();
        }
      });
      this.observer = new MutationObserver(this.handleOverflow);
      const target = this.alertArea;
      const options = {
        childList: true,
        attributes: true,
        subtree: true,
        characterData: true
      };
      this.handleOverflowDebounced = (0, _lodash.debounce)(this.handleOverflow, 100);
      this.observer.observe(target, options);
      window.addEventListener('alert.new', this.handleAddAlert);
      window.addEventListener('resize', this.handleOverflowDebounced);
      window.addEventListener('alert.change', this.handleOverflow);
      this.handleStyleChange();
    };

    this.componentWillUnmount = () => {
      config.removeListener('config.set', this.handleStyleChange);
      window.removeEventListener('alert.new', this.handleAddAlert);
      window.removeEventListener('resize', this.handleOverflowDebounced);
      window.removeEventListener('alert.change', this.handleOverflow);
    };

    this.showHistory = false;
    this.msgWidth = 0;
    this.alertHeight = 30;
    this.historyHeight = 152;
    this.state = initState;
  }

  render() {
    return _react2.default.createElement(
      'div',
      { id: 'alert-main', className: 'alert-main' },
      _react2.default.createElement(
        'div',
        {
          id: 'alert-container',
          className: `alert alert-${this.state.current.type} alert-container`,
          onClick: this.toggleHistory
        },
        _react2.default.createElement(
          'div',
          { className: 'alert-position', ref: ref => {
              this.alertPosition = ref;
            } },
          _react2.default.createElement(
            'span',
            { id: 'alert-area', ref: ref => {
                this.alertArea = ref;
              }, className: this.state.overflow ? 'overflow-anim' : '' },
            this.state.overflow ? _react2.default.createElement(
              'span',
              null,
              _react2.default.createElement(
                'span',
                { style: { marginRight: 50 } },
                this.state.current.content
              ),
              _react2.default.createElement(
                'span',
                { style: { marginRight: 50 } },
                this.state.current.content
              )
            ) : this.state.current.content
          )
        )
      ),
      _react2.default.createElement(
        'div',
        { id: 'alert-history',
          ref: ref => {
            this.alertHistory = ref;
          },
          className: 'alert-history panel',
          onClick: this.toggleHistory },
        this.state.history
      )
    );
  }
}, _class.propTypes = {}, _temp);