import _ from 'underscore';
import { React, ReactDOM } from 'mailspring-exports';
import { InjectedComponentSet } from 'mailspring-component-kit';

const ROLE = 'RootSidebar:Notifications';

export default class NotifWrapper extends React.Component {
  static displayName = 'NotifWrapper';

  componentDidMount() {
    this.observer = new MutationObserver(this.update);
    this.observer.observe(ReactDOM.findDOMNode(this), { childList: true });
    this.update(); // Necessary if notifications are already mounted
  }

  componentWillUnmount() {
    this.observer.disconnect();
  }

  update = () => {
    const className = 'highest-priority';
    const node = ReactDOM.findDOMNode(this);

    const oldHighestPriorityElems = node.querySelectorAll(`.${className}`);
    for (const oldElem of oldHighestPriorityElems) {
      oldElem.classList.remove(className);
    }

    const elemsWithPriority = node.querySelectorAll('[data-priority]');
    if (elemsWithPriority.length === 0) {
      return;
    }

    const highestPriorityElem = _.max(elemsWithPriority, elem =>
      parseInt(elem.dataset.priority, 10)
    );

    highestPriorityElem.classList.add(className);
  };

  render() {
    return (
      <InjectedComponentSet
        className="notifications"
        matching={{ role: ROLE }}
        direction="column"
        containersRequired={false}
      />
    );
  }
}