import mixin from 'reactjs-mixin';
import {Link} from 'react-router';
import {MountService} from 'foundation-ui';
/* eslint-disable no-unused-vars */
import React from 'react';
/* eslint-enable no-unused-vars */
import {StoreMixin} from 'mesosphere-shared-reactjs';

import Config from '../../config/Config';
import ConfigStore from '../../stores/ConfigStore';
import ConfigurationMap from '../../components/ConfigurationMap';
import ConfigurationMapHeading from '../../components/ConfigurationMapHeading';
import HashMapDisplay from '../../components/HashMapDisplay';
import Loader from '../../components/Loader';
import MetadataStore from '../../stores/MetadataStore';
import MarathonStore from '../../../../plugins/services/src/js/stores/MarathonStore';
import MetadataStore from '../../stores/MetadataStore';
import Page from '../../components/Page';
import VersionsModal from '../../components/modals/VersionsModal';

const METHODS_TO_BIND = [
  'handleClusterConfigModalClose',
  'handleClusterConfigModalOpen'
];

const ClusterDetailsBreadcrumbs = () => {
  const crumbs = [
    <Link to="/cluster" key={-1}>Cluster</Link>
  ];

  return <Page.Header.Breadcrumbs iconID="cluster" breadcrumbs={crumbs} />;
};

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

    this.state = {
      isClusterBuildInfoOpen: false
    };

    this.store_listeners = [
      {
        name: 'config',
        events: ['ccidSuccess']
      },
      {
        name: 'marathon',
        events: ['instanceInfoSuccess']
      },
      {
        name: 'metadata',
        events: ['dcosBuildInfoChange', 'dcosSuccess']
      }
    ];

    METHODS_TO_BIND.forEach((method) => {
      this[method] = this[method].bind(this);
    });
  }

  componentDidMount() {
    super.componentDidMount(...arguments);

    ConfigStore.fetchCCID();
    MarathonStore.fetchMarathonInstanceInfo();
    MetadataStore.fetchDCOSBuildInfo();
  }

  handleClusterConfigModalOpen() {
    this.setState({isClusterBuildInfoOpen: true});
  }

  handleClusterConfigModalClose() {
    this.setState({isClusterBuildInfoOpen: false});
  }

  getLoading() {
    return <Loader size="small" type="ballBeat" />;
  }

  getClusterDetailsHash() {
    let ccid = ConfigStore.get('ccid');
    let productVersion = MetadataStore.version;

    if (Object.keys(ccid).length) {
      ccid = ccid.zbase32_public_key;
    } else {
      ccid = this.getLoading();
    }

    if (productVersion == null) {
      productVersion = this.getLoading();
    }

    return {
      [`${Config.productName} Version`]: productVersion,
      'Cryptographic Cluster ID': ccid
    };
  }

  getMarathonDetailsHash() {
    const marathonDetails = MarathonStore.getInstanceInfo();

    if (!Object.keys(marathonDetails).length) {
      return null;
    };

    return {
      'Marathon Details': {
        'Version': marathonDetails.version,
        'Framework ID': marathonDetails.frameworkId,
        'Leader': marathonDetails.leader,
        'Marathon Config': marathonDetails.marathon_config,
        'ZooKeeper Config': marathonDetails.zookeeper_config
      }
    };
  }

  render() {
    const marathonHash = this.getMarathonDetailsHash();
    let marathonDetails = null;
    let versionsModal = null;

    if (marathonHash) {
      marathonDetails = <HashMapDisplay hash={marathonHash} />;
    }

    if (buildInfo != null) {
      versionsModal = (
        <VersionsModal onClose={this.handleClusterConfigModalClose}
          open={this.state.isClusterBuildInfoOpen}
          versionDump={buildInfo} />
      );
    }

    return (
      <Page>
        <Page.Header breadcrumbs={<ClusterDetailsBreadcrumbs />} />
        <div className="container">
          <div className="text-align-right">
            <button className="button button-link"
              disabled={buildInfo == null}
              onClick={this.handleClusterConfigModalOpen}>
              View Cluster Configuration
            </button>
          </div>
          <ConfigurationMap>
            <ConfigurationMapHeading className="flush-top">
              Cluster Details
            </ConfigurationMapHeading>
            <HashMapDisplay hash={this.getClusterDetailsHash()} />
            {marathonDetails}
            <MountService.Mount
              type="OverviewDetailTab:AdditionalClusterDetails" />
          </ConfigurationMap>
        </div>
      </Page>
    );
  }
};

OverviewDetailTab.routeConfig = {
  label: 'Overview',
  matches: /^\/cluster\/details/
};

module.exports = OverviewDetailTab;

@@ -3146,18 +3146,227 @@
 %0A%0A  
-render() %7B
+getPageHeaderActions() %7B%0A    return %5B%7B%0A      label: 'View Cluster Configuration',%0A      onItemSelect: this.handleClusterConfigModalOpen%0A    %7D%5D;%0A  %7D%0A%0A  render() %7B%0A    const buildInfo = MetadataStore.get('dcosBuildInfo');
 %0A   
@@ -3848,16 +3848,64 @@
 .Header 
+actions=%7Bthis.getPageHeaderActions()%7D%0A          
 breadcru
@@ -3983,286 +3983,8 @@
 r%22%3E%0A
-          %3Cdiv className=%22text-align-right%22%3E%0A            %3Cbutton className=%22button button-link%22%0A              disabled=%7BbuildInfo == null%7D%0A              onClick=%7Bthis.handleClusterConfigModalOpen%7D%3E%0A              View Cluster Configuration%0A            %3C/button%3E%0A          %3C/div%3E%0A
     

Move VersionsModal trigger to page header actions