import React from 'react';

import Component from '../component';
import {decorate} from '../utils/plugins';

import Notification_ from './notification';

const Notification = decorate(Notification_);

export default class Notifications extends Component {

  template(css) {
    return (<div className={css('view')}>
      { this.props.customChildrenBefore }
      {
        this.props.fontShowing &&
          <Notification
            key="font"
            backgroundColor="rgba(255, 255, 255, .2)"
            text={`${this.props.fontSize}px`}
            userDismissable={false}
            onDismiss={this.props.onDismissFont}
            dismissAfter={1000}
            />
      }

      {
        this.props.resizeShowing &&
          <Notification
            key="resize"
            backgroundColor="rgba(255, 255, 255, .2)"
            text={`${this.props.cols}x${this.props.rows}`}
            userDismissable={false}
            onDismiss={this.props.onDismissResize}
            dismissAfter={1000}
            />
      }

      {
        this.props.messageShowing &&
          <Notification
            key="message"
            backgroundColor="#FE354E"
            text={this.props.messageText}
            onDismiss={this.props.onDismissMessage}
            userDismissable={this.props.messageDismissable}
            userDismissColor="#AA2D3C"
            >{
              this.props.messageURL ? [
                this.props.messageText,
                ' (',
                <a
                  key="link"
                  style={{color: '#fff'}}
                  onClick={ev => {
                    window.require('electron').shell.openExternal(ev.target.href);
                    ev.preventDefault();
                  }}
                  href={this.props.messageURL}
                  >more</a>,
                ')'
              ] : null
            }
          </Notification>
      }

      {
        this.props.updateShowing &&
          <Notification
            key="update"
            backgroundColor="#7ED321"
            text={`Version ${this.props.updateVersion} ready`}
            onDismiss={this.props.onDismissUpdate}
            userDismissable
            >
            Version <b>{this.props.updateVersion}</b> ready.
            {this.props.updateNote && ` ${this.props.updateNote.trim().replace(/\.$/, '')}`}
            {' '}
            (<a
              style={{color: '#fff'}}
              onClick={ev => {
                window.require('electron').shell.openExternal(ev.target.href);
                ev.preventDefault();
              }}
              href={`https://github.com/zeit/hyper/releases/tag/${this.props.updateVersion}`}
              >notes</a>).
            {' '}
            <a
              style={{
                cursor: 'pointer',
                textDecoration: 'underline',
                fontWeight: 'bold'
              }}
              onClick={this.props.onUpdateInstall}
              >
                Restart
            </a>.
            { ' ' }
          </Notification>
      }
      { this.props.customChildren }
    </div>);
  }

  styles() {
    return {
      view: {
        position: 'fixed',
        bottom: '20px',
        right: '20px'
      }
    };
  }

}