/*
 * Copyright (C) 2015-2016 Actor LLC. <https://actor.im>
 */

import React, { Component, PropTypes } from 'react';
import { Container } from 'flux/utils';
import classnames from 'classnames';
import { FormattedMessage } from 'react-intl';
import { escapeWithEmoji } from '../utils/EmojiUtils';

import ActivityActionCreators from '../actions/ActivityActionCreators';
import FavoriteActionCreators from '../actions/FavoriteActionCreators';

import AvatarItem from './common/AvatarItem.react';
import ToggleFavorite from './common/ToggleFavorite.react';

import DialogInfoStore from '../stores/DialogInfoStore';
import OnlineStore from '../stores/OnlineStore';
import ActivityStore from '../stores/ActivityStore';
import DialogStore from '../stores/DialogStore';
import CallStore from '../stores/CallStore';

class ToolbarSection extends Component {
  static getStores = () => [DialogInfoStore, ActivityStore, OnlineStore, DialogStore, CallStore];

  static calculateState() {
    const thisPeer = DialogStore.getCurrentPeer();

    return {
      thisPeer,
      dialogInfo: DialogInfoStore.getInfo(),
      isActivityOpen: ActivityStore.isOpen(),
      message: OnlineStore.getMessage(),
      isFavorite: DialogStore.isFavorite(thisPeer.id),
      isCalling: CallStore.isOpen(),
      callState: CallStore.getState()
    };
  }

  static contextTypes = {
    isExperimental: PropTypes.bool
  };

  onFavoriteToggle = () => {
    const { thisPeer, isFavorite } = this.state;
    if (isFavorite) {
      FavoriteActionCreators.unfavoriteChat(thisPeer);
    } else {
      FavoriteActionCreators.favoriteChat(thisPeer);
    }
  };

  onClick = () => {
    if (!this.state.isActivityOpen) {
      ActivityActionCreators.show();
    } else {
      ActivityActionCreators.hide();
    }
  };

  getMessage() {
    const { isCalling, callState, message } = this.state;
    if (isCalling) {
      return (
        <FormattedMessage id={`toolbar.callState.${callState}`} values={{time: '00:00'}} />
      );
    }

    return message;
  }

  render() {
    const { dialogInfo, isActivityOpen, isFavorite } = this.state;

    if (!dialogInfo) {
      return <header className="toolbar" />;
    }

    const message = this.getMessage();

    const headerClassName = classnames('toolbar row', {
      toolbar__calling: this.state.isCalling
    });

    const infoButtonClassName = classnames('button button--icon', {
      'active': isActivityOpen
    });

    const favoriteClassName = classnames('toolbar__peer__favorite', {
      'toolbar__peer__favorite--active': isFavorite
    });

    return (
      <header className={headerClassName}>
        <AvatarItem image={dialogInfo.avatar}
                    placeholder={dialogInfo.placeholder}
                    size="medium"
                    title={dialogInfo.name}/>


        <div className="toolbar__peer col-xs">
          <header>
            <span className="toolbar__peer__title" dangerouslySetInnerHTML={{__html: escapeWithEmoji(dialogInfo.name)}}/>
            <span className={favoriteClassName}>
              <ToggleFavorite value={isFavorite} onToggle={this.onFavoriteToggle} />
            </span>
          </header>
          <div className="toolbar__peer__message">{message}</div>
        </div>

        <div className="toolbar__controls">
          <div className="toolbar__controls__buttons pull-right">
            <button className={infoButtonClassName} onClick={this.onClick}>
              <i className="material-icons">info</i>
            </button>
            <button className="button button--icon hide">
              <i className="material-icons">more_vert</i>
            </button>
          </div>
        </div>
      </header>
    );
  }
}

export default Container.create(ToolbarSection, {pure: false});

@@ -289,16 +289,60 @@
 iUtils';
+%0Aimport PeerUtils from '../utils/PeerUtils';
 %0A%0Aimport
@@ -1062,25 +1062,24 @@
 rentPeer();%0A
-%0A
     return %7B
@@ -1288,16 +1288,128 @@
 ,%0A      
+call: ToolbarSection.calculateCallState(thisPeer)%0A    %7D;%0A  %7D%0A%0A  static calculateCallState(thisPeer) %7B%0A    const 
 isCallin
@@ -1409,17 +1409,18 @@
 sCalling
-:
+ =
  CallSto
@@ -1434,21 +1434,201 @@
 en()
-,%0A      callS
+;%0A    if (!isCalling) %7B%0A      return %7BisCalling%7D;%0A    %7D%0A%0A    const callPeer = CallStore.getPeer();%0A%0A    return %7B%0A      isCalling,%0A      isSamePeer: PeerUtils.equals(thisPeer, callPeer),%0A      s
 tate
@@ -1649,16 +1649,37 @@
 tState()
+,%0A      time: '00:00'
 %0A    %7D;%0A
@@ -2173,28 +2173,12 @@
 t %7B 
-isCalling, callState
+call
 , me
@@ -2207,16 +2207,21 @@
     if (
+call.
 isCallin
@@ -2291,25 +2291,26 @@
 State.$%7Bcall
-S
+.s
 tate%7D%60%7D valu
@@ -2320,23 +2320,25 @@
 %7B%7Btime: 
-'00:00'
+call.time
 %7D%7D /%3E%0A  
@@ -2431,32 +2431,38 @@
 Open, isFavorite
+, call
  %7D = this.state;
@@ -2662,28 +2662,41 @@
 ng: 
-this.state.isCalling
+call.isCalling && call.isSamePeer
 %0A   

change toolbar when calling