import "@material/mwc-button";
import "@polymer/paper-input/paper-input";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";

import "../../../components/ha-card";
import "../../../components/buttons/ha-call-service-button";
import "../../../resources/ha-style";

import "../ha-config-section";

import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import LocalizeMixin from "../../../mixins/localize-mixin";

/*
 * @appliesMixin LocalizeMixin
 */
class HaConfigSectionServerControl extends LocalizeMixin(PolymerElement) {
  static get template() {
    return html`
      <style include="iron-flex ha-style">
        .validate-container {
          @apply --layout-vertical;
          @apply --layout-center-center;
          height: 140px;
        }

        .validate-result {
          color: var(--google-green-500);
          font-weight: 500;
          margin-bottom: 1em;
        }

        .config-invalid {
          margin: 1em 0;
        }

        .config-invalid .text {
          color: var(--google-red-500);
          font-weight: 500;
        }

        .config-invalid mwc-button {
          float: right;
        }

        .validate-log {
          white-space: pre-wrap;
          direction: ltr;
        }
      </style>
      <ha-config-section is-wide="[[isWide]]">
        <span slot="header"
          >[[localize('ui.panel.config.server_control.caption')]]</span
        >
        <span slot="introduction"
          >[[localize('ui.panel.config.server_control.description')]]</span
        >

        <template is="dom-if" if="[[showAdvanced]]">
          <ha-card
            header="[[localize('ui.panel.config.server_control.section.validation.heading')]]"
          >
            <div class="card-content">
              [[localize('ui.panel.config.server_control.section.validation.introduction')]]
              <template is="dom-if" if="[[!validateLog]]">
                <div class="validate-container">
                  <template is="dom-if" if="[[!validating]]">
                    <template is="dom-if" if="[[isValid]]">
                      <div class="validate-result" id="result">
                        [[localize('ui.panel.config.server_control.section.validation.valid')]]
                      </div>
                    </template>
                    <mwc-button raised="" on-click="validateConfig">
                      [[localize('ui.panel.config.server_control.section.validation.check_config')]]
                    </mwc-button>
                  </template>
                  <template is="dom-if" if="[[validating]]">
                    <paper-spinner active=""></paper-spinner>
                  </template>
                </div>
              </template>
              <template is="dom-if" if="[[validateLog]]">
                <div class="config-invalid">
                  <span class="text">
                    [[localize('ui.panel.config.server_control.section.validation.invalid')]]
                  </span>
                  <mwc-button raised="" on-click="validateConfig">
                    [[localize('ui.panel.config.server_control.section.validation.check_config')]]
                  </mwc-button>
                </div>
                <div id="configLog" class="validate-log">[[validateLog]]</div>
              </template>
            </div>
          </ha-card>

          <ha-card
            header="[[localize('ui.panel.config.server_control.section.reloading.heading')]]"
          >
            <div class="card-content">
              [[localize('ui.panel.config.server_control.section.reloading.introduction')]]
            </div>
            <div class="card-actions">
              <ha-call-service-button
                hass="[[hass]]"
                domain="homeassistant"
                service="reload_core_config"
                >[[localize('ui.panel.config.server_control.section.reloading.core')]]
              </ha-call-service-button>
            </div>
            <template is="dom-if" if="[[groupLoaded(hass)]]">
              <div class="card-actions">
                <ha-call-service-button
                  hass="[[hass]]"
                  domain="group"
                  service="reload"
                  >[[localize('ui.panel.config.server_control.section.reloading.group')]]
                </ha-call-service-button>
              </div>
            </template>
            <template is="dom-if" if="[[automationLoaded(hass)]]">
              <div class="card-actions">
                <ha-call-service-button
                  hass="[[hass]]"
                  domain="automation"
                  service="reload"
                  >[[localize('ui.panel.config.server_control.section.reloading.automation')]]
                </ha-call-service-button>
              </div>
            </template>
            <template is="dom-if" if="[[scriptLoaded(hass)]]">
              <div class="card-actions">
                <ha-call-service-button
                  hass="[[hass]]"
                  domain="script"
                  service="reload"
                  >[[localize('ui.panel.config.server_control.section.reloading.script')]]
                </ha-call-service-button>
              </div>
            </template>
            <template is="dom-if" if="[[sceneLoaded(hass)]]">
              <div class="card-actions">
                <ha-call-service-button
                  hass="[[hass]]"
                  domain="scene"
                  service="reload"
                  >[[localize('ui.panel.config.server_control.section.reloading.scene')]]
                </ha-call-service-button>
              </div>
            </template>
            <template is="dom-if" if="[[personLoaded(hass)]]">
              <div class="card-actions">
                <ha-call-service-button
                  hass="[[hass]]"
                  domain="person"
                  service="reload"
                  >[[localize('ui.panel.config.server_control.section.reloading.person')]]
                </ha-call-service-button>
              </div>
            </template>
            <div class="card-actions">
              <ha-call-service-button
                hass="[[hass]]"
                domain="zone"
                service="reload"
                >[[localize('ui.panel.config.server_control.section.reloading.zone')]]
              </ha-call-service-button>
            </div>
          </ha-card>
        </template>
        <ha-card
          header="[[localize('ui.panel.config.server_control.section.server_management.heading')]]"
        >
          <div class="card-content">
            [[localize('ui.panel.config.server_control.section.server_management.introduction')]]
          </div>
          <div class="card-actions warning">
            <ha-call-service-button
              class="warning"
              hass="[[hass]]"
              domain="homeassistant"
              service="restart"
              confirmation="[[localize('ui.panel.config.server_control.section.server_management.confirm_restart')]]"
              >[[localize('ui.panel.config.server_control.section.server_management.restart')]]
            </ha-call-service-button>
            <ha-call-service-button
              class="warning"
              hass="[[hass]]"
              domain="homeassistant"
              service="stop"
              confirmation="[[localize('ui.panel.config.server_control.section.server_management.confirm_stop')]]"
              >[[localize('ui.panel.config.server_control.section.server_management.stop')]]
            </ha-call-service-button>
          </div>
        </ha-card>
      </ha-config-section>
    `;
  }

  static get properties() {
    return {
      hass: {
        type: Object,
      },

      isWide: {
        type: Boolean,
        value: false,
      },

      validating: {
        type: Boolean,
        value: false,
      },

      isValid: {
        type: Boolean,
        value: null,
      },

      validateLog: {
        type: String,
        value: "",
      },

      showAdvanced: Boolean,
    };
  }

  groupLoaded(hass) {
    return isComponentLoaded(hass, "group");
  }

  automationLoaded(hass) {
    return isComponentLoaded(hass, "automation");
  }

  scriptLoaded(hass) {
    return isComponentLoaded(hass, "script");
  }

  sceneLoaded(hass) {
    return isComponentLoaded(hass, "scene");
  }

  personLoaded(hass) {
    return isComponentLoaded(hass, "person");
  }

  validateConfig() {
    this.validating = true;
    this.validateLog = "";
    this.isValid = null;

    this.hass.callApi("POST", "config/core/check_config").then((result) => {
      this.validating = false;
      this.isValid = result.result === "valid";

      if (!this.isValid) {
        this.validateLog = result.errors;
      }
    });
  }
}

customElements.define(
  "ha-config-section-server-control",
  HaConfigSectionServerControl
);
