<template>
  <gz-dash
    icon="$ayiTools"
    :show-context-button="true"
    :update-frequency="900000"
    v-bind="[$props, $attrs]"
    @dash-refresh="getDataFromApi()"
    @dash-context="showContext()"
    v-on="$listeners"
  >
    <template slot="main">
      <v-sheet
        v-if="obj.length == 0"
        height="400"
        class="ml-6 mt-6 text-h4 grey--text text--lighten-1"
      >
        {{ $ay.t("NoData") }}
      </v-sheet>
      <gz-chart-bar v-else :chart-data="chartData" :options="chartOptions" />
    </template>

    <template slot="settings">
      <div></div>
      <v-col v-if="context" cols="12">
        <v-dialog
          v-model="context"
          scrollable
          max-width="400px"
          data-cy="dashSettings"
          @keydown.esc="cancel"
        >
          <v-card elevation="24">
            <v-card-title class="text-h5 lighten-2" primary-title>
              <span> {{ $ay.t("Settings") }} </span>
            </v-card-title>

            <v-card-text>
              <v-select
                v-model="localSettings.timeSpan"
                class="mt-4"
                :items="selectLists.dateFilterTokens"
                item-text="name"
                item-value="id"
                :label="$ay.t('TimeSpan')"
              ></v-select>

              <v-select
                v-model="localSettings.interval"
                class="mt-4"
                :items="selectLists.units"
                item-text="name"
                item-value="id"
                :label="$ay.t('Interval')"
              ></v-select>

              <gz-tag-picker
                v-model="localSettings.wotags"
                class="mt-4"
                :label="$ay.t('Tags') + ' - ' + $ay.t('WorkOrder')"
              ></gz-tag-picker>
              <v-radio-group
                v-if="localSettings.wotags.length > 1"
                v-model="localSettings.wotagsany"
                row
                class="mt-n3"
              >
                <v-radio
                  :label="$ay.t('GridFilterDialogAndRadioText')"
                  :value="false"
                ></v-radio>
                <v-radio
                  :label="$ay.t('GridFilterDialogOrRadioText')"
                  :value="true"
                ></v-radio>
              </v-radio-group>

              <v-text-field
                v-model="localSettings.customTitle"
                class="mt-4"
                :label="$ay.t('Name')"
              ></v-text-field>

              <v-color-picker
                v-model="localSettings.color"
                class="mt-4"
                hide-mode-switch
                hide-inputs
                mode="hexa"
              ></v-color-picker>
            </v-card-text>

            <v-divider></v-divider>
            <v-card-actions>
              <v-btn color="primary" text @click.native="context = false">{{
                $ay.t("Cancel")
              }}</v-btn>
              <v-spacer></v-spacer>
              <v-btn
                color="primary"
                text
                class="ml-4"
                @click="updateSettings"
                >{{ $ay.t("Save") }}</v-btn
              >
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-col>
    </template>
  </gz-dash>
</template>
<script>
import GzDash from "./dash-base.vue";
export default {
  components: {
    GzDash
  },
  props: {
    settings: { type: Object, default: null }
  },
  data() {
    return {
      obj: [],
      context: false,
      localSettings: {},
      selectLists: {
        dateFilterTokens: [],
        units: []
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        scales: {
          xAxes: [
            {
              type: "time",
              time: {
                unit: "day"
              },
              gridLines: {
                drawOnChartArea: false
              },
              offset: true
            }
          ],
          yAxes: [
            {
              gridLines: {
                drawOnChartArea: false
              },
              ticks: {
                beginAtZero: true,
                min: 0,
                max: 100
              }
            }
          ]
        }
      }
    };
  },
  computed: {
    chartData() {
      let onTime = {
        backgroundColor: this.settings.color,
        data: []
      };

      this.obj.forEach(z => {
        if (z.z == true) {
          onTime.data.push({ x: z.x, y: z.y });
        }
      });

      return { datasets: [onTime] };
    }
  },
  async created() {
    await initWidget(this);
  },
  async mounted() {
    await this.getDataFromApi();
  },
  methods: {
    showContext: function() {
      this.localSettings = window.$gz.util.deepCopySkip(this.settings);
      this.context = true;
    },
    updateSettings: function() {
      //copy settings from local to parent settings, need to do it this way or get error about mutating prop directly which is vexing and has no easy solution seemingly
      this.settings.customTitle = this.localSettings.customTitle;
      this.settings.timeSpan = this.localSettings.timeSpan;
      this.settings.interval = this.localSettings.interval;
      this.settings.color = this.localSettings.color;
      this.settings.wotags = this.localSettings.wotags;
      this.settings.wotagsany = this.localSettings.wotagsany;

      this.$emit("dash-change"); //trigger save to server
      this.context = false;
      this.getDataFromApi();
    },

    async getDataFromApi() {
      try {
        this.errorMessage = null;
        const res = await window.$gz.api.post("kpi", {
          KPIName: "WorkOrderCompletedOnTimePct",
          criteria: {
            timeSpan: this.settings.timeSpan,
            interval: this.settings.interval,
            wotags: this.settings.wotags,
            wotagsany: this.settings.wotagsany
          },
          clientTimeStamp: window.$gz.locale.clientLocalZoneTimeStamp()
        });
        if (res.error) {
          this.errorMessage = res.error;
        } else {
          this.chartOptions.scales.xAxes[0].time.unit = this.settings.interval;
          res.data.forEach(z => {
            z.x = new Date(z.x) //convert to locale timezone and output in the closest thing to iso-8601 format
              .toLocaleString("sv-SE", {
                timeZone: this.timeZoneName
              });
          });
          this.obj = res.data;
        }
      } catch (error) {
        this.errorMessage = error.toString();
      }
    }
  }
};

/////////////////////////////////
//
//
async function initWidget(vm) {
  await fetchTranslatedText();
  populateSelectionLists(vm);
}

//////////////////////////////////////////////////////////
//
// Ensures UI translated text is available
//
async function fetchTranslatedText() {
  await window.$gz.translation.cacheTranslations([
    "DateRangeYesterday",
    "DateRangeToday",
    "DateRangeLastWeek",
    "DateRangeThisWeek",
    "DateRangeNextWeek",
    "DateRangeLastMonth",
    "DateRangeThisMonth",
    "DateRangeNextMonth",
    "DateRange14DayWindow",
    "DateRangePast",
    "DateRangeLastYear",
    "DateRangeThisYear",
    "DateRangeInTheLastThreeMonths",
    "DateRangeInTheLastSixMonths",
    "DateRangePastYear",
    "DateRangePast90Days",
    "DateRangePast30Days",
    "DateRangePast7Days",
    "DateRangePast24Hours",
    "DateRangePast6Hours",
    "DateRangeJanuary",
    "DateRangeFebruary",
    "DateRangeMarch",
    "DateRangeApril",
    "DateRangeMay",
    "DateRangeJune",
    "DateRangeJuly",
    "DateRangeAugust",
    "DateRangeSeptember",
    "DateRangeOctober",
    "DateRangeNovember",
    "DateRangeDecember",
    "DateRangePreviousYearThisMonth",
    "DateRangePreviousYearLastMonth",
    "DateRangePreviousYearNextMonth",
    "TimeSpanDays",
    "TimeSpanMonths",
    "WorkOrderList",
    "Name",
    "TimeSpan",
    "Interval",
    "WorkOrder",
    "GridFilterDialogAndRadioText",
    "GridFilterDialogOrRadioText"
  ]);
}

/////////////////////////////////
//
//
function populateSelectionLists(vm) {
  vm.selectLists.dateFilterTokens.push(
    ...[
      // { name: vm.$ay.t("DateRangeYesterday"), id: "*yesterday*" },
      // { name: vm.$ay.t("DateRangeToday"), id: "*today*" },
      { name: vm.$ay.t("DateRangeThisYear"), id: "*thisyear*" },
      { name: vm.$ay.t("DateRangeThisMonth"), id: "*thismonth*" },
      { name: vm.$ay.t("DateRangeThisWeek"), id: "*thisweek*" },
      { name: vm.$ay.t("DateRangeLastYear"), id: "*lastyear*" }, //prior year from jan to dec
      { name: vm.$ay.t("DateRangeLastMonth"), id: "*lastmonth*" },
      { name: vm.$ay.t("DateRangeLastWeek"), id: "*lastweek*" },
      //-------------------------- rando ones -------------------
      { name: vm.$ay.t("DateRange14DayWindow"), id: "*14daywindow*" },
      { name: vm.$ay.t("DateRangePast"), id: "*past*" },
      {
        name: vm.$ay.t("DateRangeInTheLastThreeMonths"),
        id: "*last3months*"
      },
      {
        name: vm.$ay.t("DateRangeInTheLastSixMonths"),
        id: "*last6months*"
      },
      { name: vm.$ay.t("DateRangePastYear"), id: "*pastyear*" }, //last 365 days
      { name: vm.$ay.t("DateRangePast90Days"), id: "*past90days*" },
      { name: vm.$ay.t("DateRangePast30Days"), id: "*past30days*" },
      { name: vm.$ay.t("DateRangePast7Days"), id: "*past7days*" },
      // { name: vm.$ay.t("DateRangePast24Hours"), id: "*past24hours*" },
      // { name: vm.$ay.t("DateRangePast6Hours"), id: "*past6hours*" },
      { name: vm.$ay.t("DateRangeJanuary"), id: "*january*" },
      { name: vm.$ay.t("DateRangeFebruary"), id: "*february*" },
      { name: vm.$ay.t("DateRangeMarch"), id: "*march*" },
      { name: vm.$ay.t("DateRangeApril"), id: "*april*" },
      { name: vm.$ay.t("DateRangeMay"), id: "*may*" },
      { name: vm.$ay.t("DateRangeJune"), id: "*june*" },
      { name: vm.$ay.t("DateRangeJuly"), id: "*july*" },
      { name: vm.$ay.t("DateRangeAugust"), id: "*august*" },
      { name: vm.$ay.t("DateRangeSeptember"), id: "*september*" },
      { name: vm.$ay.t("DateRangeOctober"), id: "*october*" },
      { name: vm.$ay.t("DateRangeNovember"), id: "*november*" },
      { name: vm.$ay.t("DateRangeDecember"), id: "*december*" },
      {
        name: vm.$ay.t("DateRangePreviousYearThisMonth"),
        id: "*lastyearthismonth*"
      },
      {
        name: vm.$ay.t("DateRangePreviousYearLastMonth"),
        id: "*lastyearlastmonth*"
      },
      {
        name: vm.$ay.t("DateRangePreviousYearNextMonth"),
        id: "*lastyearnextmonth*"
      }
    ]
  );

  vm.selectLists.units.push(
    ...[
      { name: vm.$ay.t("TimeSpanDays"), id: "day" },
      {
        name: vm.$ay.t("TimeSpanMonths"),
        id: "month"
      }
    ]
  );
}
</script>
