<template>
  <div v-if="value != null">
    <v-col cols="12">
      <v-menu offset-y>
        <template v-slot:activator="{ on, attrs }">
          <div class="text-subtitle-1">
            <v-icon color="primary">$ayiUserClock</v-icon>
            {{ $ay.t("WorkOrderItemScheduledUserList") }}
            <v-btn large icon v-bind="attrs" v-on="on">
              <v-icon small color="primary">$ayiEllipsisV</v-icon>
            </v-btn>
          </div>
        </template>
        <v-list>
          <v-list-item v-if="canAdd" @click="newItem">
            <v-list-item-icon>
              <v-icon>$ayiPlus</v-icon>
            </v-list-item-icon>
            <v-list-item-title>{{ $ay.t("New") }}</v-list-item-title>
          </v-list-item>
          <v-list-item v-if="canDelete && !isDeleted" @click="deleteItem">
            <v-list-item-icon>
              <v-icon>$ayiTrashAlt</v-icon>
            </v-list-item-icon>
            <v-list-item-title>{{ $ay.t("SoftDelete") }}</v-list-item-title>
          </v-list-item>
          <v-list-item v-if="canDelete && isDeleted" @click="unDeleteItem">
            <v-list-item-icon>
              <v-icon>$ayiTrashRestoreAlt</v-icon>
            </v-list-item-icon>
            <v-list-item-title>{{ $ay.t("Undelete") }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-col>

    <template v-if="showTable">
      <!-- ################################ SCHEDULED USERS TABLE ############################### -->
      <v-col cols="12">
        <v-data-table
          :headers="headerList"
          :items="itemList"
          item-key="index"
          v-model="selectedRow"
          class="elevation-1"
          disable-pagination
          disable-filtering
          disable-sort
          hide-default-footer
          data-cy="scheduledUsersTable"
          dense
          :item-class="itemRowClasses"
          @click:row="handleRowClick"
          :show-select="$vuetify.breakpoint.xs"
          single-select
        >
        </v-data-table>
      </v-col>
    </template>
    <template v-if="activeItemIndex != null">
      <h1 v-if="isDeleted">MARKED FOR DELETE</h1>
      <v-col cols="12" sm="6" lg="4" xl="3">
        <gz-decimal
          v-model="
            value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
              .estimatedQuantity
          "
          :readonly="formState.readOnly"
          :disabled="isDeleted"
          :label="$ay.t('WorkOrderItemScheduledUserEstimatedQuantity')"
          ref="scheduledUsers.EstimatedQuantity"
          data-cy="scheduledUsers.EstimatedQuantity"
          :error-messages="
            form().serverErrors(
              this,
              `Items[${activeWoItemIndex}].scheduledUsers[${activeItemIndex}].estimatedQuantity`
            )
          "
          :rules="[
            form().decimalValid(this, 'scheduledUsers.EstimatedQuantity'),
            form().required(this, 'scheduledUsers.EstimatedQuantity')
          ]"
          @input="
            fieldValueChanged(`Items[${activeWoItemIndex}].scheduledUsers[
              ${activeItemIndex}
            ].estimatedQuantity`)
          "
        ></gz-decimal>
      </v-col>
      <!-- {{ value.items[activeWoItemIndex].scheduledUsers[activeItemIndex] }} -->
    </template>
  </div>
</template>
<script>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*  XXXeslint-disable    */
////////////////////////////////////////////////////////////////////////////////////////////////////////////

export default {
  created() {
    this.setDefaultView();
  },
  data() {
    return {
      activeItemIndex: null,
      selectedRow: []
    };
  },
  props: {
    value: {
      default: null,
      type: Object
    },
    pvm: {
      default: null,
      type: Object
    },
    activeWoItemIndex: {
      default: null,
      type: Number
    }
  },
  watch: {
    activeWoItemIndex(val, oldVal) {
      if (val != oldVal) {
        this.setDefaultView();
      }
    }
  },
  methods: {
    newItem() {
      let newIndex = this.value.items[this.activeWoItemIndex].scheduledUsers
        .length;

      this.value.items[this.activeWoItemIndex].scheduledUsers.push({
        id: 0,
        concurrency: 0,
        userId: null,
        estimatedQuantity: 0,
        startDate: null,
        stopDate: null,
        serviceRateId: null,
        isDirty: true,
        workOrderItemId: this.value.items[this.activeWoItemIndex].id
      });
      this.$emit("change");
      this.selectedRow = [{ index: newIndex }];
      this.activeItemIndex = newIndex;
    },
    unDeleteItem() {
      this.value.items[this.activeWoItemIndex].scheduledUsers[
        this.activeItemIndex
      ].deleted = false;
      this.setDefaultView();
    },
    deleteItem() {
      // if ((await window.$gz.dialog.confirmDelete()) != true) {
      //   return;
      // }

      // let o = this.value.items[this.activeWoItemIndex].scheduledUsers[
      //   this.activeItemIndex
      // ];

      // if (o.id != 0) {
      //   //it's a previously saved item so it needs to be removed at the server too
      //   this.$emit("graph-item-deleted", {
      //     atype: window.$gz.type.WorkOrderItemScheduledUser,
      //     id: o.id,
      //     objectIndex: this.activeItemIndex,
      //     woItemIndex: this.activeWoItemIndex
      //   });
      // }
      // this.value.items[this.activeWoItemIndex].scheduledUsers.splice(
      //   this.activeItemIndex,
      //   1
      // );
      // this.setDefaultView();

      //SOFT DELETE TEST
      //NO need to confirm, it's apparent?
      //or maybe it's a big enough deal it should be confirmed
      //or maybe on save it should prompt that some items will be deleted is this ok etc??
      //  if ((await window.$gz.dialog.confirmDelete()) != true) {
      //   return;
      // }

      this.value.items[this.activeWoItemIndex].scheduledUsers[
        this.activeItemIndex
      ].deleted = true;
      this.setDefaultView();
    },
    setDefaultView: function() {
      //if only one record left then display it otherwise just let the datatable show what the user can click on
      if (this.value.items[this.activeWoItemIndex].scheduledUsers.length == 1) {
        this.selectedRow = [{ index: 0 }];
        this.activeItemIndex = 0;
      } else {
        this.selectedRow = [];
        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
      }
    },
    handleRowClick: function(item) {
      this.activeItemIndex = item.index;
      this.selectedRow = [{ index: item.index }];
    },
    form() {
      return window.$gz.form;
    },
    fieldValueChanged(ref) {
      if (!this.formState.loading && !this.formState.readonly) {
        //flag this record dirty so it gets picked up by save
        this.value.items[this.activeWoItemIndex].scheduledUsers[
          this.activeItemIndex
        ].isDirty = true;
        window.$gz.form.fieldValueChanged(this.pvm, ref);
      }
    },
    itemRowClasses: function(item) {
      let ret = "";
      // console.log("scheduseritemrowclass:", {
      //   activewoitemindex: this.activeWoItemIndex,
      //   activeItem: this.activeItemIndex
      // });
      const isDeleted =
        this.value.items[this.activeWoItemIndex].scheduledUsers[item.index]
          .deleted === true;

      const hasError = this.form().childRowHasError(
        this,
        `Items[${this.activeWoItemIndex}].ScheduledUsers[${item.index}].`
      );

      if (hasError) {
        ret = "font-weight-black font-italic error--text ";
      }
      if (isDeleted) {
        ret += "text-decoration-line-through text--disabled";
      }
      return ret;
    }
  },
  computed: {
    isDeleted: function() {
      return (
        this.value.items[this.activeWoItemIndex].scheduledUsers[
          this.activeItemIndex
        ].deleted === true
      );
    },

    headerList: function() {
      /*
  If the column is a text, left-align it
  If the column is a number or number + unit, (or date) right-align it (like excel)
  */
      let headers = [];

      if (
        this.form().showMe(
          this,
          "ScheduledUsers.WorkOrderItemScheduledUserStartDate"
        )
      ) {
        headers.push({
          text: this.$ay.t("WorkOrderItemScheduledUserStartDate"),
          align: "right",
          value: "startDate"
        });
      }

      if (
        this.form().showMe(
          this,
          "ScheduledUsers.WorkOrderItemScheduledUserStopDate"
        )
      ) {
        headers.push({
          text: this.$ay.t("WorkOrderItemScheduledUserStopDate"),
          align: "right",
          value: "stopDate"
        });
      }

      if (
        this.form().showMe(
          this,
          "ScheduledUsers.WorkOrderItemScheduledUserEstimatedQuantity"
        )
      ) {
        headers.push({
          text: this.$ay.t("WorkOrderItemScheduledUserEstimatedQuantity"),
          align: "right",
          value: "estimatedQuantity"
        });
      }

      headers.push({
        text: this.$ay.t("WorkOrderItemScheduledUserUserID"),
        align: "left",
        value: "userViz"
      });

      headers.push({
        text: this.$ay.t("WorkOrderItemScheduledUserServiceRateID"),
        align: "left",
        value: "rateViz"
      });
      // headers.push({ text: "", value: "actions" });

      return headers;
    },
    itemList: function() {
      return this.value.items[this.activeWoItemIndex].scheduledUsers.map(
        (x, i) => {
          return {
            index: i,
            id: x.id,
            startDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
              x.startDate,
              this.pvm.timeZoneName,
              this.pvm.languageName,
              this.pvm.hour12
            ),
            stopDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
              x.stopDate,
              this.pvm.timeZoneName,
              this.pvm.languageName,
              this.pvm.hour12
            ),
            estimatedQuantity: window.$gz.locale.decimalLocalized(
              x.estimatedQuantity,
              this.pvm.languageName
            ),
            userViz: x.userViz,
            rateViz: x.rateViz
          };
        }
      );
    },
    formState: function() {
      return this.pvm.formState;
    },
    formCustomTemplateKey: function() {
      return this.pvm.formCustomTemplateKey;
    },
    showTable: function() {
      return this.value.items[this.activeWoItemIndex].scheduledUsers.length > 1;
    },
    canAdd: function() {
      return this.pvm.rights.change && this.pvm.subRights.scheduledUsers.create;
    },
    canDelete: function() {
      return (
        this.activeItemIndex != null &&
        this.pvm.rights.change &&
        this.pvm.subRights.scheduledUsers.delete
      );
    }
  }
};
</script>
