<template>
  <section class="alerts__kpi-filter">
    <ods-radio-group
      class="radio-group__container"
      v-model="quickFilter"
      size="medium">
      <ods-radio
        class="allAlertsRadio radioText"
        label="all"
        border
        size=medium
        @change="quickFilterAlerts"
      >{{ $t(`dataTables.all`) }}: {{ allKpi }}
      </ods-radio>
      <ods-radio
        v-for="kpiCount in kpiCounts"
        :key="kpiCount._id"
        :label="kpiCount._id"
        border
        size=medium
        @change="quickFilterAlerts"
        :class="[addRadioColor(kpiCount._id),
        quickFilter == kpiCount._id ?
          addRadioBg(kpiCount._id) :
          '']"> {{ $t(`dataTables.${kpiCount._id}`) }} : {{kpiCount.count}}
      </ods-radio>
    </ods-radio-group>
    <div class="alerts__kpi-average-time">
      <ods-icon
        name="chrono"
        size="16"
        class="alerts__kpi-average-icon">
      </ods-icon>
      <p class="alerts__kpi-average-title"> {{ $t(`dataTables.averageKpiIndicator`) }}:
        <span class="alerts__kpi-average-data">{{averageTimeResolution}}</span>
      </p>
    </div>
  </section>
</template>

<script>
import {mapActions} from 'vuex';

export default {
  name: 'kpi-filter',
  props: ['kpiCounts', 'averageTimeResolution'],
  data() {
    return {
      allKpi: 0,
      quickFilter: 'all',
    };
  },
  mounted() {},
  beforeUpdate() {
    this.allKpi = this.kpiCounts.reduce((acc, elem) => acc + Number(elem.count), 0);
  },
  methods: {
    ...mapActions([
      'fetchWarningsPie',
    ]),
    addRadioColor(scope) {
      const radioButtonColor = {
        open: 'pendingText radioText',
        resolved: 'solvedText radioText',
        assigned: 'assignedText radioText',
        informative: 'informativeText radioText',
      };
      return radioButtonColor[scope.toLowerCase()];
    },
    quickFilterAlerts(kpiFilter) {
      this.$emit('quickFilterAlerts', kpiFilter);
    },
    addRadioBg(scope) {
      const radioButtonBgCheckedColor = {
        open: 'pendingBg',
        resolved: 'solvedBg',
        assigned: 'assignedBg',
        informative: 'informativeBg',
      };
      return radioButtonBgCheckedColor[scope.toLowerCase()];
    },
  },
};
</script>

<style lang="scss" scoped>

.alerts__kpi-filter {
  min-width: 1248px;
  display: flex;
  justify-content: space-between;
  margin: auto;
}
.alerts__kpi-average-time {
  color: $--color-neutral-1;
  display: flex;
  justify-content: right;
  align-items: center;
  margin-right: 26px;
}

.alerts__kpi-average-icon {
  margin-right: 9px;
}

.alerts__kpi-average-title {
  font-size: 12px;
  line-height: 24px;
  text-align: right;
}

.alerts__kpi-average-data {
  color: $--color-black;
  font-weight: 500;
  display: inline-block;
  width: 68px;
}

// radio buttons

.radio-group__container {
  margin: 32px 22px 29px;
}

@mixin radio-button-border-background($color, $color-bg) {
  #{if(&, '&.is-checked', '.is-checked')} {
    border-color: $color;
    background: $color-bg;
  }
}

.allAlertsRadio {
  @include radio-button-border-background($--color-all, $--color-all-bg);
  color: $--color-all;
}

// alerts data table container
.radioText {
  font-weight: 500;
  height: 40px;
}
.solvedText {
  color: $--color-success;
}

.assignedText {
  color: $--color-primary;
}
.pendingText {
  color: $--color-danger;
}

.informativeText {
  color: $--color-neutral-1;
}

.pendingBg {
  @include radio-button-border-background(
    $--color-danger,
    $--color-danger-light
  );
}

.assignedBg {
  @include radio-button-border-background(
    $--color-primary,
    $--color-primary-lighter
  );
}
.solvedBg {
  @include radio-button-border-background(
    $--color-success,
    $--color-success-light
  );
}
.informativeBg {
  @include radio-button-border-background(
    $--color-neutral-1,
    $--color-neutral-1-light
  );
}

</style>

<style lang="scss">
@mixin radio-inner-border-background($color) {
  #{if(&, '&.is-checked .ods-radio__inner', '.is-checked .ods-radio__inner')} {
    border-color: $color;
    height: 16px;
    width: 16px;
    &:after {
      background-color: $color;
      width: 12px;
      height: 12px;
    }
  }
}

.pendingBg {
  @include radio-inner-border-background($--color-danger);
}
.assignedBg {
  @include radio-inner-border-background($--color-primary);
}
.solvedBg {
  @include radio-inner-border-background($--color-success);
}
.informativeBg {
  @include radio-inner-border-background($--color-neutral-1);
}
.allAlertsRadio {
  @include radio-inner-border-background($--color-all);
}

</style>
