import PropTypes from "prop-types";
import React from "react";
import { Dropdown, Tooltip } from "reactjs-components";

import HashMapDisplay from "#SRC/js/components/HashMapDisplay";
import Util from "#SRC/js/utils/Util";
import StringUtil from "#SRC/js/utils/StringUtil";
import Icon from "#SRC/js/components/Icon";
import EmptyStates from "#SRC/js/constants/EmptyStates";
import RouterUtil from "#SRC/js/utils/RouterUtil";

const METHODS_TO_BIND = ["getHashMapRenderKeys"];

class FrameworkConfigurationReviewScreen extends React.Component {
  constructor(props) {
    super(props);

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

  getHashMapRenderKeys(formData) {
    if (!Util.isObject(formData)) {
      return {};
    }

    let renderKeys = {};
    Object.keys(formData).forEach(key => {
      renderKeys[key] = StringUtil.capitalizeEveryWord(key);
      renderKeys = Object.assign(
        renderKeys,
        this.getHashMapRenderKeys(formData[key])
      );
    });

    return renderKeys;
  }

  getVersionsDropdown() {
    const { frameworkMeta } = this.props;

    const versionItems = [
      {
        id: frameworkMeta,
        html: (
          <div className="button-split-content-wrapper">
            <Icon
              className="services-version-select-icon services-version-select-icon-selected button-split-content-item"
              id="check"
              size="mini"
              color="neutral"
            />
            <Icon
              className="services-version-select-icon button-split-content-item"
              id="commit"
              size="mini"
              color="neutral"
            />
            <span
              className="button-split-content-item text-overflow"
              title={frameworkMeta}
            >
              <span className="badge-container">
                <span className="badge-container-text">{frameworkMeta}</span>
                <span className="badge">Active</span>
              </span>
            </span>
          </div>
        )
      }
    ];

    return (
      <Tooltip
        content="Configuration version"
        wrapperClassName="button button-transparent button-flush"
      >
        <Dropdown
          buttonClassName="services-version-select-toggle dropdown-toggle button button-transparent button-split-content flush-left"
          dropdownMenuClassName="services-version-select-menu dropdown-menu"
          dropdownMenuListClassName="dropdown-menu-list"
          dropdownMenuListItemClassName="clickable"
          items={versionItems}
          persistentID={frameworkMeta}
          key="version-dropdown"
          scrollContainer=".gm-scroll-view"
          scrollContainerParentSelector=".gm-prevented"
          transition={true}
          transitionName="dropdown-menu"
          wrapperClassName="services-version-select dropdown"
        />
      </Tooltip>
    );
  }

  getVersionsActions() {
    return (
      <div className="pod flush-top flush-right flush-left">
        <div className="button-collection">{this.getVersionsDropdown()}</div>
      </div>
    );
  }

  render() {
    const { frameworkData, title, onEditClick, frameworkMeta } = this.props;

    const fileName = "config.json";
    const configString = JSON.stringify(frameworkData, null, 2);

    return (
      <div className="container">
        <div className="row">
          <div className="column-6">
            {title && <h1 className="flush-top">{title}</h1>}
            {frameworkMeta && this.getVersionsActions()}
          </div>
          <div className="column-6 text-align-right">
            <button
              className="button button-primary-link button-inline-flex"
              onClick={onEditClick}
            >
              <Icon id="pencil" size="mini" family="system" />
              <span>{"Edit Config"}</span>
            </button>
            <a
              className="button button-primary-link flush-right"
              download={fileName}
              onClick={RouterUtil.triggerIEDownload.bind(
                null,
                fileName,
                configString
              )}
              href={RouterUtil.getResourceDownloadPath(
                "attachment/json",
                fileName,
                configString
              )}
            >
              <Icon id="download" size="mini" family="system" />
              <span>{"Download Config"}</span>
            </a>
          </div>
        </div>
        <HashMapDisplay
          hash={frameworkData}
          headingLevel={0} // this is invalid usage of HasMapDisplay, related issue: https://jira.mesosphere.com/browse/DCOS-35756
          renderKeys={this.getHashMapRenderKeys(frameworkData)}
          headlineClassName={"text-capitalize"}
          emptyValue={EmptyStates.CONFIG_VALUE}
        />
      </div>
    );
  }
}

FrameworkConfigurationReviewScreen.defaultProps = {
  title: ""
};

FrameworkConfigurationReviewScreen.propTypes = {
  onEditClick: PropTypes.func.isRequired,
  frameworkData: PropTypes.object.isRequired,
  title: PropTypes.string,
  frameworkMeta: PropTypes.string
};

module.exports = FrameworkConfigurationReviewScreen;

@@ -467,16 +467,40 @@
 derKeys%22
+, %22getFrameworkSections%22
 %5D;%0A%0Aclas
@@ -3164,16 +3164,542 @@
 );%0A  %7D%0A%0A
+  getFrameworkSections() %7B%0A    const %7B frameworkData %7D = this.props;%0A    const renderKeys = this.getHashMapRenderKeys(frameworkData);%0A%0A    return Object.keys(renderKeys).map((key, index) =%3E %7B%0A      return (%0A        %3CHashMapDisplay%0A          hash=%7BframeworkData%5Bkey%5D%7D%0A          headline=%7BrenderKeys%5Bkey%5D%7D%0A          renderKeys=%7BrenderKeys%7D%0A          headlineClassName=%7B%22text-capitalize%22%7D%0A          emptyValue=%7BEmptyStates.CONFIG_VALUE%7D%0A          key=%7B%60framework-config-review-section-$%7Bindex%7D%60%7D%0A        /%3E%0A      );%0A    %7D);%0A  %7D%0A%0A
   render
@@ -5073,356 +5073,37 @@
     
-%3CHashMapDisplay%0A          hash=%7BframeworkData%7D%0A          headingLevel=%7B0%7D // this is invalid usage of HasMapDisplay, related issue: https://ji
+%7Bthis.getF
 ra
-.
 me
-sosphere.com/browse/DCOS-35756%0A          renderKeys=%7Bthis.getHashMapRenderKeys(frameworkData)%7D%0A          headlineClassName=%7B%22text-capitalize%22%7D%0A          emptyValue=%7BEmptyStates.CONFIG_VALUE%7D%0A        /%3E
+workSections()%7D
 %0A   

Fix heading level hack