import { FormattedMessage } from "react-intl";
import mixin from "reactjs-mixin";
/* eslint-disable no-unused-vars */
import React from "react";
/* eslint-enable no-unused-vars */
import { StoreMixin } from "mesosphere-shared-reactjs";

import DCOSStore from "#SRC/js/stores/DCOSStore";
import Icon from "#SRC/js/components/Icon";

import DeploymentsModal from "./DeploymentsModal";

const METHODS_TO_BIND = ["handleDeploymentsButtonClick", "handleModalClose"];

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

    this.store_listeners = [
      {
        name: "dcos",
        events: ["change"],
        listenAlways: true
      }
    ];

    this.state = {
      isOpen: false
    };

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

  componentWillReceiveProps() {
    const deployments = DCOSStore.deploymentsList.getItems();

    if (this.state.isOpen && deployments.length === 0) {
      this.setState({ isOpen: false });
    }
  }

  handleDeploymentsButtonClick() {
    this.setState({ isOpen: true });
  }

  handleModalClose() {
    this.setState({ isOpen: false });
  }

  render() {
    const deployments = DCOSStore.deploymentsList.getItems();
    const deploymentsCount = deployments.length;
    const loading = !DCOSStore.serviceDataReceived;

    if (loading || deploymentsCount === 0) {
      return null;
    }

    return (
      <button
        className="button button-primary-link button--deployments"
        onClick={this.handleDeploymentsButtonClick}
      >
        <Icon color="grey" id="spinner" size="mini" />
        <div className="button--deployments__copy">
          <FormattedMessage
            id="SERVICES.DEPLOYMENT_COUNT"
            values={{ deploymentsCount }}
          />
        </div>
        <DeploymentsModal
          isOpen={this.state.isOpen}
          onClose={this.handleModalClose}
        />
      </button>
    );
  }
}

DeploymentStatusIndicator.defaultProps = {};

DeploymentStatusIndicator.propTypes = {};

module.exports = DeploymentStatusIndicator;

@@ -1,51 +1,4 @@
-import %7B FormattedMessage %7D from %22react-intl%22;%0A
 impo
@@ -122,24 +122,105 @@
 sed-vars */%0A
+import %7B Trans %7D from %22@lingui/macro%22;%0Aimport %7B i18nMark %7D from %22@lingui/react%22;%0A
 import %7B Sto
@@ -1464,16 +1464,152 @@
 %0A    %7D%0A%0A
+    // L10NTODO: Pluralize%0A    const deploymentText =%0A      deploymentsCount === 1 ? i18nMark(%22deployment%22) : i18nMark(%22deployments%22);%0A%0A
     retu
@@ -1875,120 +1875,67 @@
     
-%3CFormattedMessage%0A            id=%22SERVICES.DEPLOYMENT_COUNT%22%0A            values=%7B%7B deploymentsCount %7D%7D%0A         
+%7BdeploymentsCount%7D %3CTrans id=%7BdeploymentText%7D render=%22span%22
  /%3E%0A

mark component strings for translation