<template>
  <b-container
    :style="{ display: 'flex', 'flex-direction': 'column' }"
    fluid="xxl pt-0 m-0"
  >
    <page-title :description="$t('appNavigation.analyticalPanel')" />
    <div class="notification-time__container">
      <span class="semi-bold-12px">{{
        $t('global.ariaLabel.notificationTime')
      }}</span>
      <div class="form-control notification-time">
        <b-form-input
          v-model="notificationInput"
          type="number"
          class="notification-time__input"
        >
        </b-form-input>
        <button class="notification-button">
          <img
            class="notification-time__icon"
            src="@/assets/images/refresh.svg"
          />
        </button>
      </div>
    </div>
    <date-switch :switch-time-scale="switchTimeScale" :time-scale="timeScale" />
    <!-- Temperature Section -->
    <div class="page-collapse-decorator">
      <b-button
        v-b-toggle.toggle-collapse_1
        variant="link"
        class="collapse-button semi-bold-16px"
      >
        <img src="@/assets/images/temperature-icon.svg" />
        <span class="bold-16px">{{ $t('subHeader.temperature') }}</span>
        <component :is="iconChevronUp" class="icon-expand" />
      </b-button>
      <b-collapse id="toggle-collapse_1" class="nav-item__nav">
        <!-- Temperature Limit Inputs -->
        <div class="limit-container">
          <div class="trmperature-limt">
            <img src="@/assets/images/labels/non-normal.svg" />
            <span class="semi-bold-12px">{{
              $t('tablesDescription.nonNormalMode')
            }}</span>
            <b-form-input
              v-model="temperatureNonNormalInput"
              type="number"
              :min="0"
              :max="temperatureCritical"
              class="form-control medium-12px"
            >
            </b-form-input>
          </div>
          <div class="trmperature-limt">
            <img src="@/assets/images/labels/critical.svg" />
            <span class="semi-bold-12px">{{
              $t('tablesDescription.criticalMode')
            }}</span>
            <b-form-input
              v-model="temperatureCritical"
              type="number"
              :min="temperatureNonNormalInput"
              :max="temperatureWarningInput"
              class="form-control medium-12px"
            >
            </b-form-input>
          </div>
          <div class="trmperature-limt">
            <img src="@/assets/images/labels/warning.svg" />
            <span class="semi-bold-12px">{{
              $t('tablesDescription.temperatureWarning')
            }}</span>
            <b-form-input
              v-model="temperatureWarningInput"
              type="number"
              :min="temperatureCritical"
              :max="100"
              class="form-control medium-12px"
            >
            </b-form-input>
          </div>
          <b-button
            class="save-button"
            variant="primary"
            @click="updateTemperature"
          >
            {{ $t('global.action.save') }}
          </b-button>
        </div>
        <!-- Temperature Tables -->
        <temperature-table
          :time-scale="timeScale"
          :warning="temperatureWarning"
          :non-normal="temperatureNonNormal"
          :critical="temperatureCritical"
        />
        <accessory-table :records="accessoryData.temperatureTable" />
      </b-collapse>
    </div>
    <!-- using Section -->
    <div class="page-collapse-decorator">
      <b-button
        v-b-toggle.toggle-collapse_2
        variant="link"
        class="collapse-button semi-bold-16px"
      >
        <img src="@/assets/images/usage-icon.svg" />
        <span class="bold-16px">{{ $t('pagePower.usingPercent') }}</span>
        <component :is="iconChevronUp" class="icon-expand" />
      </b-button>
      <b-collapse id="toggle-collapse_2" class="nav-item__nav">
        <!-- using Limit Inputs -->
        <div class="limit-container">
          <div class="trmperature-limt">
            <img src="@/assets/images/labels/warning.svg" />
            <span class="semi-bold-12px">{{
              $t('tablesDescription.warningPercent')
            }}</span>
            <b-form-input
              v-model="usingNonNormalInput"
              type="number"
              :min="0"
              :max="usingCritical"
              class="form-control medium-12px"
            >
            </b-form-input>
          </div>
          <div class="trmperature-limt">
            <img src="@/assets/images/labels/non-normal.svg" />
            <span class="semi-bold-12px">{{
              $t('tablesDescription.nonNormalModePercent')
            }}</span>
            <b-form-input
              v-model="usingCritical"
              type="number"
              :min="usingNonNormalInput"
              :max="usingWarningInput"
              class="form-control medium-12px"
            >
            </b-form-input>
          </div>
          <div class="trmperature-limt">
            <img src="@/assets/images/labels/critical.svg" />
            <span class="semi-bold-12px">{{
              $t('tablesDescription.criticalModePercent')
            }}</span>
            <b-form-input
              v-model="usingWarningInput"
              type="number"
              :min="usingCritical"
              :max="100"
              class="form-control medium-12px"
            >
            </b-form-input>
          </div>
          <b-button class="save-button" variant="primary" @click="updateUsage">
            {{ $t('global.action.save') }}
          </b-button>
        </div>
        <!-- using Tables -->
        <using-table
          :time-scale="timeScale"
          :warning="usingWarning"
          :non-normal="usingNonNormal"
          :critical-start="usingCritical"
        />
        <accessory-table :records="accessoryData.usingTable" />
      </b-collapse>
    </div>
    <!-- Input Voltage Section -->
    <div class="page-collapse-decorator">
      <b-button
        v-b-toggle.toggle-collapse_3
        variant="link"
        class="collapse-button semi-bold-16px"
      >
        <img src="@/assets/images/voltage-icon.svg" />
        <span class="bold-16px">{{
          $t('tablesDescription.inputVoltage')
        }}</span>
        <component :is="iconChevronUp" class="icon-expand" />
      </b-button>
      <b-collapse id="toggle-collapse_3" class="nav-item__nav">
        <div class="limit-container">
          <div class="frequency-limt">
            <img src="@/assets/images/labels/warning.svg" />
            <span class="semi-bold-12px">{{
              $t('tablesDescription.voltageWarning')
            }}</span>
            <b-form-input
              v-model="powerWarningInput"
              type="number"
              class="form-control medium-12px"
            >
            </b-form-input>
          </div>
          <div class="frequency-limt">
            <img src="@/assets/images/labels/shutdown.svg" />
            <span class="semi-bold-12px">{{
              $t('tablesDescription.voltageShutdown')
            }}</span>
            <b-form-input
              v-model="powerShutdownInput"
              type="number"
              class="form-control medium-12px"
            >
            </b-form-input>
          </div>
          <b-button class="save-button" variant="primary" @click="updatePower">
            {{ $t('global.action.save') }}
          </b-button>
        </div>
        <!-- Input Voltage Tables -->
        <voltage-table :time-scale="timeScale" :warning="frequencyWarning" />
        <accessory-table :records="accessoryData.voltageTable" />
      </b-collapse>
    </div>
    <!-- Input Power Section -->
    <div class="page-collapse-decorator">
      <b-button
        v-b-toggle.toggle-collapse_4
        variant="link"
        class="collapse-button semi-bold-16px"
      >
        <img src="@/assets/images/power-icon.svg" />
        <span class="bold-16px">{{ $t('tablesDescription.inputPower') }}</span>
        <component :is="iconChevronUp" class="icon-expand" />
      </b-button>
      <b-collapse id="toggle-collapse_4" class="nav-item__nav">
        <div class="limit-container">
          <div class="frequency-limt">
            <img src="@/assets/images/labels/warning.svg" />
            <span class="semi-bold-12px">{{
              $t('tablesDescription.powerWarning')
            }}</span>
            <b-form-input
              v-model="powerWarningInput"
              type="number"
              class="form-control medium-12px"
            >
            </b-form-input>
          </div>
          <div class="frequency-limt">
            <img src="@/assets/images/labels/shutdown.svg" />
            <span class="semi-bold-12px">{{
              $t('tablesDescription.powerShutdown')
            }}</span>
            <b-form-input
              v-model="powerShutdownInput"
              type="number"
              class="form-control medium-12px"
            >
            </b-form-input>
          </div>
          <b-button class="save-button" variant="primary" @click="updatePower">
            {{ $t('global.action.save') }}
          </b-button>
        </div>
        <!-- Input Power Table -->
        <power-table
          :time-scale="timeScale"
          :warning="powerWarning"
          :shutdown="powerShutdown"
        />
        <accessory-table :records="accessoryData.powerTable" />
      </b-collapse>
    </div>
    <!-- Output Voltage Section -->
    <div class="page-collapse-decorator">
      <b-button
        v-b-toggle.toggle-collapse_5
        variant="link"
        class="collapse-button semi-bold-16px"
      >
        <img src="@/assets/images/voltage-icon.svg" />
        <span class="bold-16px">{{
          $t('tablesDescription.outputVoltage')
        }}</span>
        <component :is="iconChevronUp" class="icon-expand" />
      </b-button>
      <b-collapse id="toggle-collapse_5" class="nav-item__nav">
        <div class="limit-container">
          <div class="frequency-limt">
            <img src="@/assets/images/labels/warning.svg" />
            <span class="semi-bold-12px">{{
              $t('tablesDescription.voltageWarning')
            }}</span>
            <b-form-input
              v-model="powerWarningInput"
              type="number"
              class="form-control medium-12px"
            >
            </b-form-input>
          </div>
          <div class="frequency-limt">
            <img src="@/assets/images/labels/shutdown.svg" />
            <span class="semi-bold-12px">{{
              $t('tablesDescription.voltageShutdown')
            }}</span>
            <b-form-input
              v-model="powerShutdownInput"
              type="number"
              class="form-control medium-12px"
            >
            </b-form-input>
          </div>
          <b-button class="save-button" variant="primary" @click="updatePower">
            {{ $t('global.action.save') }}
          </b-button>
        </div>
        <!-- Output Voltage Tables -->
        <voltage-table :time-scale="timeScale" :warning="frequencyWarning" />
        <accessory-table :records="accessoryData.voltageTable" />
      </b-collapse>
    </div>
    <!-- Output Power Section -->
    <div class="page-collapse-decorator">
      <b-button
        v-b-toggle.toggle-collapse_6
        variant="link"
        class="collapse-button semi-bold-16px"
      >
        <img src="@/assets/images/power-icon.svg" />
        <span class="bold-16px">{{ $t('tablesDescription.outputPower') }}</span>
        <component :is="iconChevronUp" class="icon-expand" />
      </b-button>
      <b-collapse id="toggle-collapse_6" class="nav-item__nav">
        <div class="limit-container">
          <div class="frequency-limt">
            <img src="@/assets/images/labels/warning.svg" />
            <span class="semi-bold-12px">{{
              $t('tablesDescription.powerWarning')
            }}</span>
            <b-form-input
              v-model="powerWarningInput"
              type="number"
              class="form-control medium-12px"
            >
            </b-form-input>
          </div>
          <div class="frequency-limt">
            <img src="@/assets/images/labels/shutdown.svg" />
            <span class="semi-bold-12px">{{
              $t('tablesDescription.powerShutdown')
            }}</span>
            <b-form-input
              v-model="powerShutdownInput"
              type="number"
              class="form-control medium-12px"
            >
            </b-form-input>
          </div>
          <b-button class="save-button" variant="primary" @click="updatePower">
            {{ $t('global.action.save') }}
          </b-button>
        </div>
        <!-- Output Power Table -->
        <power-table
          :time-scale="timeScale"
          :warning="powerWarning"
          :shutdown="powerShutdown"
        />
        <accessory-table :records="accessoryData.powerTable" />
      </b-collapse>
    </div>
    <!-- Amperage Section -->
    <div class="page-collapse-decorator">
      <b-button
        v-b-toggle.toggle-collapse_7
        variant="link"
        class="collapse-button semi-bold-16px"
      >
        <img src="@/assets/images/amperage-icon.svg" />
        <span class="bold-16px">{{ $t('tablesDescription.amperage') }}</span>
        <component :is="iconChevronUp" class="icon-expand" />
      </b-button>
      <b-collapse id="toggle-collapse_7" class="nav-item__nav">
        <div class="limit-container">
          <div class="frequency-limt">
            <img src="@/assets/images/labels/warning.svg" />
            <span class="semi-bold-12px">{{
              $t('tablesDescription.voltageWarning')
            }}</span>
            <b-form-input
              v-model="powerWarningInput"
              type="number"
              class="form-control medium-12px"
            >
            </b-form-input>
          </div>
          <div class="frequency-limt">
            <img src="@/assets/images/labels/shutdown.svg" />
            <span class="semi-bold-12px">{{
              $t('tablesDescription.voltageShutdown')
            }}</span>
            <b-form-input
              v-model="powerShutdownInput"
              type="number"
              class="form-control medium-12px"
            >
            </b-form-input>
          </div>
          <b-button class="save-button" variant="primary" @click="updatePower">
            {{ $t('global.action.save') }}
          </b-button>
        </div>
        <!-- Amperage Table -->
        <voltage-table :time-scale="timeScale" :warning="frequencyWarning" />
        <accessory-table :records="accessoryData.voltageTable" />
      </b-collapse>
    </div>
  </b-container>
</template>
<script>
import PageTitle from '@/components/Global/PageTitle';
import PageSection from '@/components/Global/PageSection';
import DateSwitch from '@/components/Global/SilaComponents/DateSwitch';

import TemperatureTable from './TemperatureTable';
import UsingTable from './UsingTable';
import PowerTable from './PowerTable';
import VoltageTable from './VoltageTable';
import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTablePower';
import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';

import { AccessoryData } from './helpers';

export default {
  components: {
    PageTitle,
    PageSection,
    DateSwitch,
    TemperatureTable,
    UsingTable,
    PowerTable,
    VoltageTable,
    AccessoryTable,
  },
  data() {
    return {
      timeScale: 'hour',
      temperatureNonNormalInput: 44,
      temperatureNonNormal: 44,
      temperatureCriticalInput: 55,
      temperatureCritical: 55,
      temperatureWarningInput: 72,
      temperatureWarning: 72,
      usingNonNormalInput: 50,
      usingNonNormal: 50,
      usingCriticalInput: 55,
      usingCritical: 55,
      usingWarningInput: 72,
      usingWarning: 72,
      // frequencyWarning: 660,
      // frequencyWarningInput: 660,
      powerWarning: 66,
      powerWarningInput: 66,
      powerShutdown: 88,
      powerShutdownInput: 88,
      notificationInput: 42,
      accessoryData: AccessoryData,
      iconChevronUp: iconChevronUp,
    };
  },
  methods: {
    switchTimeScale(period) {
      this.timeScale = period;
    },
    updateTemperature() {
      this.temperatureNonNormal = +this.temperatureNonNormalInput;
      this.temperatureCritical = +this.temperatureCriticalInput;
      this.temperatureWarning = +this.temperatureWarningInput;
    },
    updateUsage() {
      this.usingNonNormal = +this.usingNonNormalInput;
      this.usingCritical = +this.usingCriticalInput;
      this.usingWarning = +this.usingWarningInput;
    },
    updateFrequency() {
      this.frequencyWarning = +this.frequencyWarningInput;
    },
    updatePower() {
      this.powerWarning = +this.powerWarningInput;
      this.powerShutdown = +this.powerShutdownInput;
    },
  },
};
</script>
<style lang="scss" scoped>
//nav items style
.nav-item,
.nav-link {
  padding: 0;
}
.nav-item {
  list-style-type: none;
}

a {
  color: $text-primary !important;
  &:hover {
    color: $text-primary !important;
  }
}

.notification-time__container {
  position: absolute;
  top: calc(#{$header-height});
  right: 0px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

.notification-time {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  border: none;
  box-shadow: none;
  border-radius: 8px;
  margin: 12px 32px 12px 8px;
  width: 236px;
  height: 40px;
  z-index: 1001;
}

.notification-time__icon {
  width: 20px;
  height: 20px;
}

.notification-time__input {
  border: none;
  background: none;
  box-shadow: none;
}

.notification-button {
  border: none;
  background: none;
}

.semi-bold-12px {
  z-index: 1001;
}
// temperature limit comtainer
.limit-container {
  height: 85px;
  width: 100%;
  padding: 0 32px 10px 32px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 24px;
}

.trmperature-limt {
  height: 60px;
  width: 100%;
  max-width: 270px;
  display: flex;
  align-items: baseline;
  flex-flow: row wrap;
  gap: 8px;
}

.form-control {
  height: 36px;
  &.non-normal {
    width: 125px;
  }
}
.save-button {
  width: 151px;
  height: 36px;
}

.frequency-limt {
  height: 60px;
  width: 100%;
  max-width: 288px;
  display: flex;
  align-items: baseline;
  flex-flow: row wrap;
  gap: 8px;
}
</style>
