<template>
  <b-container fluid="xxl pt-0 m-0">
    <page-title />
    <div class="main-container">
      <b-row class="m-2">
        <b-col md="8" xl="6">
          <page-section class="m-2 pt-2 pb-2">
            <b-row>
              <b-col>
                <dl>
                  <dt class="semi-bold-16px">
                    {{ $t('pageServerPowerOperations.serverStatus') }}
                  </dt>
                  <dd
                    v-if="serverStatus === 'on'"
                    style="margin-top: 10px"
                    class="regular-12px"
                    data-test-id="powerServerOps-text-hostStatus"
                  >
                    <img
                      style="margin-right: 5px"
                      src="@/assets/images/status/on.svg"
                    />
                    {{ $t('global.status.on_full') }}
                  </dd>
                  <dd
                    v-else-if="serverStatus === 'off'"
                    style="margin-top: 10px"
                    class="regular-12px"
                    data-test-id="powerServerOps-text-hostStatus"
                  >
                    <img
                      style="margin-right: 5px"
                      src="@/assets/images/status/off.svg"
                    />
                    {{ $t('global.status.off_full') }}
                  </dd>
                  <dd v-else class="regular-12px">
                    {{ $t('global.status.notAvailable') }}
                  </dd>
                </dl>
              </b-col>
            </b-row>
            <b-row>
              <b-col>
                <dl>
                  <dt class="semi-bold-12px">
                    {{ $t('pageServerPowerOperations.lastPowerOperation') }}
                  </dt>
                  <dd
                    v-if="lastPowerOperationTime"
                    class="regular-12px"
                    data-test-id="powerServerOps-text-lastPowerOp"
                  >
                    {{ lastPowerOperationTime | formatDate }}
                    {{ lastPowerOperationTime | formatTime }}
                  </dd>
                  <dd v-else>--</dd>
                </dl>
              </b-col>
            </b-row>
          </page-section>
        </b-col>
      </b-row>
      <b-row class="m-2">
        <b-col sm="8" md="6" xl="7">
          <page-section class="m-2">
            <b-row class="ml-0 mb-3">
              <span class="semi-bold-16px">{{ 'Управление' }}</span>
            </b-row>
            <alert :show="oneTimeBootEnabled" variant="warning">
              {{ $t('pageServerPowerOperations.oneTimeBootWarning') }}
            </alert>
            <template v-if="isOperationInProgress">
              <alert variant="info">
                {{ $t('pageServerPowerOperations.operationInProgress') }}
              </alert>
            </template>
            <template v-else-if="serverStatus === 'off'">
              <popover-with-slot
                id="popover-powerOn"
                :button-label="$t('pageServerPowerOperations.powerOn')"
                :popup-label="$t('pageServerPowerOperations.powerOnServer')"
                placement="right"
                :action="powerOn"
              >
                <b-button
                  id="popover-powerOn"
                  ref="button"
                  size="md"
                  variant="primary"
                >
                  {{ $t('pageServerPowerOperations.powerOn') }}
                </b-button>
              </popover-with-slot>
            </template>
            <template v-else>
              <!-- Reboot server options -->
              <b-form novalidate class="mb-2">
                <b-form-group class="regular-12px cb">
                  <label class="semi-bold-12px">{{
                    $t('pageServerPowerOperations.rebootServer')
                  }}</label>
                  <b-form-radio
                    v-model="form.rebootOption"
                    name="reboot-option"
                    data-test-id="serverPowerOperations-radio-rebootOrderly"
                    value="orderly"
                  >
                    {{ $t('pageServerPowerOperations.orderlyReboot') }}
                  </b-form-radio>
                  <b-form-radio
                    v-model="form.rebootOption"
                    name="reboot-option"
                    data-test-id="serverPowerOperations-radio-rebootImmediate"
                    value="immediate"
                  >
                    {{ $t('pageServerPowerOperations.immediateReboot') }}
                  </b-form-radio>
                </b-form-group>
                <popover-with-slot
                  id="popover-reboot"
                  :button-label="$t('pageServerPowerOperations.reboot')"
                  :popup-label="$t('pageServerPowerOperations.rebootServer')"
                  placement="right"
                  :action="rebootServer"
                >
                  <b-button
                    id="popover-reboot"
                    ref="button"
                    size="md"
                    variant="primary"
                  >
                    {{ $t('pageServerPowerOperations.reboot') }}
                  </b-button>
                </popover-with-slot>
              </b-form>
              <!-- Shutdown server options -->
              <b-form>
                <b-form-group class="regular-12px cb">
                  <label class="semi-bold-12px">{{
                    $t('pageServerPowerOperations.shutdownServer')
                  }}</label>
                  <b-form-radio
                    v-model="form.shutdownOption"
                    name="shutdown-option"
                    data-test-id="serverPowerOperations-radio-shutdownOrderly"
                    value="orderly"
                  >
                    {{ $t('pageServerPowerOperations.orderlyShutdown') }}
                  </b-form-radio>
                  <b-form-radio
                    v-model="form.shutdownOption"
                    name="shutdown-option"
                    data-test-id="serverPowerOperations-radio-shutdownImmediate"
                    value="immediate"
                  >
                    {{ $t('pageServerPowerOperations.immediateShutdown') }}
                  </b-form-radio>
                </b-form-group>
                <popover-with-slot
                  id="popover-shutDown"
                  :button-label="$t('pageServerPowerOperations.shutDown')"
                  :popup-label="$t('pageServerPowerOperations.shutdownServer')"
                  placement="right"
                  :action="shutdownServer"
                >
                  <b-button
                    id="popover-shutDown"
                    ref="button"
                    size="md"
                    variant="secondary"
                  >
                    {{ $t('pageServerPowerOperations.shutDown') }}
                  </b-button>
                </popover-with-slot>
              </b-form>
            </template>
          </page-section>
        </b-col>
      </b-row>
      <b-row>
        <b-col v-if="hasBootSourceOptions" class="m-2" sm="8" md="6" xl="4">
          <page-section class="m-2">
            <boot-settings />
          </page-section>
        </b-col>
      </b-row>
    </div>
  </b-container>
</template>

<script>
import PageTitle from '@/components/Global/PageTitle';
import PageSection from '@/components/Global/PageSection';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import BootSettings from './BootSettings';
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
import Alert from '@/components/Global/Alert';
import PopoverWithSlot from '@/components/Global/SilaComponents/PopoverWithSlot';

export default {
  name: 'ServerPowerOperations',
  components: {
    PageTitle,
    PageSection,
    BootSettings,
    Alert,
    PopoverWithSlot,
  },
  mixins: [BVToastMixin, LoadingBarMixin],
  beforeRouteLeave(to, from, next) {
    this.hideLoader();
    next();
  },
  data() {
    return {
      form: {
        rebootOption: 'orderly',
        shutdownOption: 'orderly',
      },
    };
  },
  computed: {
    serverStatus() {
      return this.$store.getters['global/serverStatus'];
    },
    isOperationInProgress() {
      return this.$store.getters['controls/isOperationInProgress'];
    },
    lastPowerOperationTime() {
      return this.$store.getters['controls/lastPowerOperationTime'];
    },
    oneTimeBootEnabled() {
      return this.$store.getters['serverBootSettings/overrideEnabled'];
    },
    hasBootSourceOptions() {
      let bootOptions = this.$store.getters[
        'serverBootSettings/bootSourceOptions'
      ];
      return bootOptions.length !== 0;
    },
  },
  created() {
    this.startLoader();
    const bootSettingsPromise = new Promise((resolve) => {
      this.$root.$on('server-power-operations-boot-settings-complete', () =>
        resolve()
      );
    });
    Promise.all([
      this.$store.dispatch('serverBootSettings/getBootSettings'),
      this.$store.dispatch('controls/getLastPowerOperationTime'),
      bootSettingsPromise,
    ]).finally(() => this.endLoader());
  },
  methods: {
    powerOn() {
      this.$store.dispatch('controls/serverPowerOn');
    },
    rebootServer() {
      if (this.form.rebootOption === 'orderly') {
        this.$store.dispatch('controls/serverSoftReboot');
      } else if (this.form.rebootOption === 'immediate') {
        this.$store.dispatch('controls/serverHardReboot');
      }
    },
    shutdownServer() {
      if (this.form.shutdownOption === 'orderly') {
        this.$store.dispatch('controls/serverSoftPowerOff');
      }
      if (this.form.shutdownOption === 'immediate') {
        this.$store.dispatch('controls/serverHardPowerOff');
      }
    },
  },
};
</script>
