<template>
  <gz-dash
    icon="$ayiUser"
    :show-context-button="true"
    :update-frequency="600000"
    v-bind="[$props, $attrs]"
    @dash-refresh="getDataFromApi()"
    @dash-context="showContext()"
    v-on="$listeners"
  >
    <template slot="main">
      <div>
        <!-- <gz-chart-line
        :width="400"
        :height="240"
        :chart-data="obj"
        :options="{
          responsive: true,
          maintainAspectRatio: false,
          legend: { display: false }
        }"
      ></gz-chart-line> -->

        <gz-chart-line
          v-if="visible"
          :width="400"
          :height="330"
          :chart-data="chartData"
          :options="timeLineChartOptions"
        />
      </div>
    </template>

    <template slot="settings">
      <div></div>
      <v-col v-if="context" cols="12">
        <v-dialog
          v-model="context"
          scrollable
          max-width="600px"
          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 style="height: 500px;">
              {{ settings }}
              <v-select
                v-model="localSettings.timeSpan"
                :items="selectLists.dateFilterTokens"
                item-text="name"
                item-value="id"
                :label="$ay.t('TimeSpanDateRange')"
              ></v-select>

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

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

              <v-color-picker
                v-model="localSettings.color"
                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: {},
      visible: true,
      context: false,
      localSettings: {},
      selectLists: {
        dateFilterTokens: [],
        tagFilterOperators: [],
        units: []
      },
      timeLineChartOptions: {
        responsive: true,
        maintainAspectRatio: false,
        // legend: { display: false },
        scales: {
          xAxes: [
            {
              type: "time",
              time: {
                unit: this.settings.interval
              },
              gridLines: {
                drawOnChartArea: false
              }
            }
          ],
          yAxes: [
            {
              gridLines: {
                drawOnChartArea: false
              },
              ticks: {
                beginAtZero: true
              }
            }
          ]
        }
      }
    };
  },
  computed: {
    chartData() {
      return {
        datasets: [
          {
            label: this.$ay.t("WorkOrderItemLaborServiceRateQuantity"),
            borderColor: this.settings.color ?? "#000000",
            //backgroundColor: Palette.color.soft_deep_blue,
            fill: false,
            radius: 0,
            hoverRadius: 10,
            hitRadius: 4,
            data: this.obj
          }
        ]
      };
    }
  },
  async created() {
    await initWidget(this);
  },
  async mounted() {
    //must be called from mounted to have refs available
    //console.log("reminders-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
      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.$emit("dash-change");
      this.context = false;
      this.getDataFromApi();
      this.visible = false;
      this.visible = true;
    },

    async getDataFromApi() {
      //todo: need a equivalent of a datalist at the server but that can take the minimal criteria offered here and return the data easily digestable
      //do not want the client end to have to do math or anything and also it needs to drive reporting of the same type as the widget display
      //so as similar as possible to the datatable system but handles the math and summarizing ideally in the db server itself
      /*
      TODO: 
  DYNAMIC FROM SETS
    handle params (time range, currentusertoken,period)
    enforce current user only (I guess that's built in if use token or leave out token because it's assumed in which case rename to WorkOrderItemLaborQuantitySummaryPERSONAL )
  ACTUAL CHART WORKING
    line chart, can it work with this data, does it need adjustment to locale?
    scroll? Vertical better than horizontal? Select bar OR line?


  REPORTING
    v.nexxt?
    charts lib at server?


      DateTrunc https://www.postgresqltutorial.com/postgresql-date_trunc/ will respect changes of month or year or whatever so this works 

SELECT row_to_json(t) as res from (
	
	select SUM(AWORKORDERITEMLABOR.serviceratequantity) SERVICERATESUM, date_trunc('month',AWORKORDERITEMLABOR.servicestartdate) timeframe

FROM AWORKORDER
		LEFT JOIN AWORKORDERITEM ON AWORKORDER.ID = AWORKORDERITEM.WORKORDERID
		LEFT JOIN AWORKORDERITEMLABOR ON AWORKORDERITEM.ID = AWORKORDERITEMLABOR.WORKORDERITEMID
		WHERE AWORKORDERITEMLABOR.userid = 10

GROUP BY timeframe
ORDER BY timeframe ASC
) t





      */

      // let tt = {
      //   KPIName: "WorkOrderItemLaborQuantitySummary",
      //   criteria: {
      //     timeSpan: this.settings.timeSpan,
      //     interval: this.settings.interval
      //   },
      //   clientTimeStamp: window.$gz.locale.clientLocalZoneTimeStamp()
      // };
      // console.log(tt);

      try {
        this.errorMessage = null;
        const res = await window.$gz.api.post("kpi", {
          KPIName: "WorkOrderItemLaborQuantitySummary",
          criteria: {
            timeSpan: this.settings.timeSpan,
            interval: this.settings.interval
          },
          clientTimeStamp: window.$gz.locale.clientLocalZoneTimeStamp()
        });
        if (res.error) {
          this.errorMessage = res.error;
        } else {
          // console.log(res);
          this.obj = res.data;
        }
      } catch (error) {
        this.errorMessage = error.toString();
      }
    }
  }
};

/////////////////////////////////
//
//
async function initWidget(vm) {
  //console.log("INitializing widget dash-labotr-hours-personal");
  await fetchTranslatedText();
  populateSelectionLists(vm);
}

//////////////////////////////////////////////////////////
//
// Ensures UI translated text is available
//
async function fetchTranslatedText() {
  await window.$gz.translation.cacheTranslations([
    "Filter",
    "GridRowFilterDropDownBlanksItem",
    "GridRowFilterDropDownNonBlanksItem",
    "GridRowFilterDropDownEquals",
    "GridRowFilterDropDownNotEquals",
    "GridRowFilterDropDownDoesNotContain",
    "GridRowFilterDropDownContains",
    "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",
    "WorkOrderItemLaborServiceRateQuantity"
  ]);
}

/////////////////////////////////
//
//
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("DateRangeLastWeek"), id: "*lastweek*" },
      { name: vm.$ay.t("DateRangeThisWeek"), id: "*thisweek*" },

      { name: vm.$ay.t("DateRangeLastMonth"), id: "*lastmonth*" },
      { name: vm.$ay.t("DateRangeThisMonth"), id: "*thismonth*" },
      { name: vm.$ay.t("DateRange14DayWindow"), id: "*14daywindow*" },
      { name: vm.$ay.t("DateRangePast"), id: "*past*" },
      { name: vm.$ay.t("DateRangeLastYear"), id: "*lastyear*" }, //prior year from jan to dec
      { name: vm.$ay.t("DateRangeThisYear"), id: "*thisyear*" },
      {
        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.tagFilterOperators.push(
    ...[
      { name: vm.$ay.t("GridRowFilterDropDownBlanksItem"), id: "*NOVALUE*" },
      {
        name: vm.$ay.t("GridRowFilterDropDownNonBlanksItem"),
        id: "*HASVALUE*"
      },
      { name: vm.$ay.t("GridRowFilterDropDownEquals"), id: "=" },
      { name: vm.$ay.t("GridRowFilterDropDownNotEquals"), id: "!=" },
      { name: vm.$ay.t("GridRowFilterDropDownDoesNotContain"), id: "!-%-" },
      { name: vm.$ay.t("GridRowFilterDropDownContains"), id: "-%-" }
    ]
  );

  vm.selectLists.units.push(
    ...[
      { name: vm.$ay.t("TimeSpanDays"), id: "day" },
      {
        name: vm.$ay.t("TimeSpanMonths"),
        id: "month"
      }
    ]
  );
}
/*
var crit=(string)options.Criteria["timeSpan"];

*/
</script>
