<template>
  <div>
    <b-col class="d-flex flex-nowrap align-items-center page-divider">
      <img src="@/assets/images/_sila/collapsed/fan.svg" />
      {{ $t('pageFans.speed') }}
    </b-col>
    <!--    <b-row class="align-items-end limit-container">
      <b-col xs="12" sm="6" md="4" class="pt-2">
        <b-form-group :label="$t('pageFans.labels.warning')">
          <b-form-input v-model="warning" type="number" :min="0" :max="3150">
          </b-form-input>
        </b-form-group>
      </b-col>
      <b-col xs="12" sm="6" md="4" class="pt-2">
        <b-form-group :label="$t('pageFans.labels.shutdown')">
          <b-form-input
            v-model="shutdown"
            :min="warning"
            :max="4000"
            type="number"
          ></b-form-input>
        </b-form-group>
      </b-col>
      <b-col xs="12" sm="6" md="4" class="pt-2">
        <b-button variant="primary" style="height: 35px">
          {{ $t('global.action.save') }}
        </b-button>
      </b-col>
    </b-row>-->
    <chart
      type="fans"
      :colors="colors"
      :time-scale="timeScale"
      :data="filteredSensors"
      :warning="warning"
      :shutdown="shutdown"
    ></chart>

    <b-table
      responsive="md"
      show-empty
      table-variant="accessory"
      hover
      :items="items"
      :fields="fields"
      :empty-text="$t('global.table.emptyMessage')"
      :bisy="isBusy"
    >
      <template #cell(name)="{ value, index }">
        <div
          class="item-color"
          :style="`background-color: ${colors[index]}`"
        ></div>
        {{ value }}
      </template>
      <template #cell(minDate)="{ value }">
        <span style="color: rgb(12, 28, 41)">
          {{ value.time }}
        </span>
        <span>
          {{ value.date }}
        </span>
      </template>
      <template #cell(maxDate)="{ value }">
        <span style="color: rgb(12, 28, 41)">
          {{ value.time }}
        </span>
        <span>
          {{ value.date }}
        </span>
      </template>
      <template #cell(pwm)="{ value }">
        <span>
          {{ `${value}%` }}
        </span>
      </template>
    </b-table>
  </div>
</template>
<script>
import Chart from '@/components/_sila/Global/Chart';

import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';

import { getItems } from '@/utilities/_sila/metricProperties';

export default {
  components: { Chart },
  mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
  props: {
    timeScale: {
      type: String,
      default: 'hour',
    },
  },
  data() {
    return {
      warning: 2450,
      shutdown: 3150,
      isBusy: true,
      fields: [
        {
          key: 'name',
          label: this.$t('pageFans.table.name'),
        },
        {
          key: 'current',
          label: this.$t('pageFans.table.current'),
        },
        {
          key: 'middle',
          label: this.$t('pageFans.table.middle'),
        },
        {
          key: 'pwm',
          label: this.$t('pageFans.table.pwm'),
        },
        {
          key: 'min',
          label: this.$t('pageFans.table.min'),
        },
        {
          key: 'minDate',
          label: this.$t('pageFans.table.minDate'),
        },
        {
          key: 'max',
          label: this.$t('pageFans.table.max'),
        },
        {
          key: 'maxDate',
          label: this.$t('pageFans.table.maxDate'),
        },
      ],
    };
  },

  computed: {
    items() {
      const allArr = getItems(this.filteredSensors);

      let pwmArr = allArr.filter((item) => {
        return item.name.toLowerCase().includes('pwm');
      });

      let cpuArr = allArr.filter((item) => {
        return !item.name.toLowerCase().includes('pwm');
      });

      return cpuArr.map((cpu) => {
        let pwm = pwmArr.find((pwm) => pwm.name === this.getPwmByCpu(cpu.name))
          .middle;
        return {
          pwm,
          ...cpu,
        };
      });
    },

    allSensors() {
      return this.timeScale === 'hour'
        ? this.$store.getters['fan/fansLastHour']
        : this.$store.getters['fan/fans'];
    },

    filteredSensors() {
      return this.getFilteredTableData(this.allSensors, this.activeFilters);
    },

    colors() {
      return this.$randomColor({
        count: this.items?.length,
        hue: 'random',
        luminosity: 'random',
      });
    },
  },

  watch: {
    timeScale() {
      this.loadData();
    },
  },

  created() {
    this.loadData();
  },

  methods: {
    getPwmByCpu(cpu) {
      switch (cpu) {
        case 'System_Fan_1':
          return 'Pwm_1';
        case 'System_Fan_2':
          return 'Pwm_5';
        case 'System_Fan_3':
          return 'Pwm_6';
        case 'CPU1_Fan':
          return 'Pwm_7';
        case 'CPU2_Fan':
          return 'Pwm_8';
        default:
          return null;
      }
    },

    onOpened(state) {
      if (state) {
        this.loadData();
      }
    },

    loadData() {
      let payload = { lastHour: false };
      if (this.timeScale === 'hour') {
        payload = { lastHour: true };
      }

      this.startLoader();
      this.$store.dispatch('fan/getFansDynamic', payload).finally(() => {
        this.endLoader();
        this.isBusy = false;
      });
    },
  },
};
</script>
