content: import React from 'react';
  import Component from '../component';
  import {decorate, getTermGroupProps} from '../utils/plugins';
  import CommandRegistry from '../command-registry';
  import TermGroup_ from './term-group';
  
  const TermGroup = decorate(TermGroup_, 'TermGroup');
  const isMac = /Mac/.test(navigator.userAgent);
  
  export default class Terms extends Component {
  
    constructor(props, context) {
      super(props, context);
      this.terms = {};
      this.bound = new WeakMap();
      this.onRef = this.onRef.bind(this);
      this.registerCommands = CommandRegistry.register;
      props.ref_(this);
    }
  
    shouldComponentUpdate(nextProps) {
      for (const i in nextProps) {
        if (i === 'write') {
          continue;
        }
        if (this.props[i] !== nextProps[i]) {
          return true;
        }
      }
      for (const i in this.props) {
        if (i === 'write') {
          continue;
        }
        if (this.props[i] !== nextProps[i]) {
          return true;
        }
      }
      return false;
    }
  
    onRef(uid, term) {
      if (term) {
        this.terms[uid] = term;
      } else if (!this.props.sessions[uid]) {
        delete this.terms[uid];
      }
    }
  
    getTermByUid(uid) {
      return this.terms[uid];
    }
  
    getActiveTerm() {
      return this.getTermByUid(this.props.activeSession);
    }
  
    getLastTermIndex() {
      return this.props.sessions.length - 1;
    }
  
    onTerminal(uid, term) {
      this.terms[uid] = term;
    }
  
    componentWillUnmount() {
      this.props.ref_(null);
    }
  
    template(css) {
      const shift = !isMac && this.props.termGroups.length > 1;
      return (<div
        className={css('terms', shift && 'termsShifted')}
        >
        { this.props.customChildrenBefore }
        {
          this.props.termGroups.map(termGroup => {
            const {uid} = termGroup;
            const isActive = uid === this.props.activeRootGroup;
            const props = getTermGroupProps(uid, this.props, {
              termGroup,
              terms: this.terms,
              activeSession: this.props.activeSession,
              sessions: this.props.sessions,
              customCSS: this.props.customCSS,
              fontSize: this.props.fontSize,
              borderColor: this.props.borderColor,
              cursorColor: this.props.cursorColor,
              cursorShape: this.props.cursorShape,
              cursorBlink: this.props.cursorBlink,
              fontFamily: this.props.fontFamily,
              uiFontFamily: this.props.uiFontFamily,
              fontSmoothing: this.props.fontSmoothing,
              foregroundColor: this.props.foregroundColor,
              backgroundColor: this.props.backgroundColor,
              padding: this.props.padding,
              colors: this.props.colors,
              bell: this.props.bell,
              bellSoundURL: this.props.bellSoundURL,
              copyOnSelect: this.props.copyOnSelect,
              modifierKeys: this.props.modifierKeys,
              onActive: this.props.onActive,
              onResize: this.props.onResize,
              onTitle: this.props.onTitle,
              onData: this.props.onData,
              onURLAbort: this.props.onURLAbort,
              quickEdit: this.props.quickEdit,
              parentProps: this.props
            });
  
            return (
              <div
                key={`d${uid}`}
                className={css('termGroup', isActive && 'termGroupActive')}
                >
                <TermGroup
                  key={uid}
                  ref_={this.onRef}
                  {...props}
                  />
              </div>
            );
          })
        }
        { this.props.customChildren }
      </div>);
    }
  
    styles() {
      return {
        terms: {
          position: 'absolute',
          marginTop: '34px',
          top: 0,
          right: 0,
          left: 0,
          bottom: 0,
          color: '#fff',
          transition: isMac ? '' : 'margin-top 0.3s ease'
        },
  
        termsShifted: {
          marginTop: '68px'
        },
  
        termGroup: {
          display: 'none',
          width: '100%',
          height: '100%'
        },
  
        termGroupActive: {
          display: 'block'
        }
      };
    }
  }
  