import mixin from 'reactjs-mixin';
import React from 'react';
import {StoreMixin} from 'mesosphere-shared-reactjs';

import ClipboardTrigger from '../components/ClipboardTrigger';
import ClusterName from './ClusterName';
import MetadataStore from '../stores/MetadataStore';

class ClusterHeader extends mixin(StoreMixin) {
  constructor() {
    super(...arguments);

    this.store_listeners = [
      {
        name: 'metadata',
        events: ['success'],
        listenAlways: false
      }
    ];
  }

  shouldComponentUpdate(nextProps) {
    if (nextProps.useClipboard !== this.props.useClipboard) {
      return true;
    }

    return false;
  }

  getFlashButton() {
    if (!this.props.useClipboard) {
      return null;
    }

    return <ClipboardTrigger copyText={this.getPublicIP()} />;
  }

  getPublicIP() {
    let metadata = MetadataStore.get('metadata');

    if ((typeof metadata !== 'object') ||
      metadata.PUBLIC_IPV4 == null ||
      metadata.PUBLIC_IPV4.length === 0) {
      return null;
    }

    return metadata.PUBLIC_IPV4;
  }

  getHostName() {
    let ip = this.getPublicIP();

    return (
      <div className="header-subtitle"
        title={ip}>
        <p className="hostname text-overflow flush">
          {ip}
        </p>
        <span className="header-subtitle-action">
          {this.getFlashButton()}
        </span>
      </div>
    );
  }

  render() {
    return (
      <div>
        <ClusterName />
        {this.getHostName()}
      </div>
    );
  }
}

ClusterHeader.defaultProps = {
  useClipboard: true
};

ClusterHeader.propTypes = {
  useClipboard: React.PropTypes.bool
};

module.exports = ClusterHeader;

@@ -214,16 +214,43 @@
 rName';%0A
+import Icon from './Icon';%0A
 import M
@@ -700,70 +700,8 @@
 ) %7B%0A
-    if (!this.props.useClipboard) %7B%0A      return null;%0A    %7D%0A%0A
     
@@ -1034,24 +1034,52 @@
 ostName() %7B%0A
+    let flashButton = null;%0A
     let ip =
@@ -1096,24 +1096,197 @@
 ublicIP();%0A%0A
+    if (this.props.useClipboard) %7B%0A      flashButton = (%0A        %3Cspan className=%22header-subtitle-action%22%3E%0A          %7Bthis.getFlashButton()%7D%0A        %3C/span%3E%0A      );%0A    %7D%0A%0A
     return (
@@ -1300,32 +1300,56 @@
 %3Cdiv className=%22
+cluster-header-hostname 
 header-subtitle%22
@@ -1462,185 +1462,344 @@
     
-%3Cspan className=%22header-subtitle-action%22%3E%0A          %7Bthis.getFlashButton()%7D%0A        %3C/span%3E%0A      %3C/div%3E%0A    )
+%7BflashButton%7D%0A      %3C/div%3E%0A    );%0A  %7D%0A%0A  render() %7B%0A    let caret = null;%0A%0A    if (this.props.showCaret) %7B%0A      caret = %3CIcon family=%22mini%22 id=%22caret-down%22 key=%22caret%22 size=%22mini%22 /%3E
 ;%0A  
+ 
+ 
 %7D%0A%0A  
+ 
+ 
 re
-nder() %7B%0A    return (%0A      %3Cdiv%3E%0A        %3CClusterName /
+turn (%0A      %3Cdiv className=%22cluster-header%22%3E%0A        %3Cdiv className=%22cluster-header-name%22%3E%0A          %3CClusterName /%3E%7Bcaret%7D%0A        %3C/div
 %3E%0A  
@@ -1879,24 +1879,44 @@
 ltProps = %7B%0A
+  showCaret: false,%0A
   useClipboa
@@ -1956,16 +1956,51 @@
 pes = %7B%0A
+  showCaret: React.PropTypes.bool,%0A
   useCli

Allow caret in ClusterHeader