<template>
  <div>
    <span class="text-caption">{{ $ay.t("WorkOrderStatus") }}</span>

    <template v-if="hasState">
      <br />
      <span class="text-h6">{{ currentState.name }}</span>
      <v-icon :color="currentState.color" class="ml-4">$ayiFlag</v-icon>
      <v-icon color="primary" v-if="currentState.locked" class="ml-4"
        >$ayiLock</v-icon
      >
      <v-icon color="primary" v-if="currentState.completed" class="ml-4"
        >$ayiCheckCircle</v-icon
      >
    </template>

    <template v-if="canAdd">
      <div class="xmt-5">
        <v-autocomplete
          v-model="selectedStatus"
          :items="pvm.selectLists.allowedwostatus"
          item-text="name"
          item-value="id"
        ></v-autocomplete>
      </div>
    </template>

    <!-- 
    Display as drop down box set to last status entered, user selects new status and it appends a new record to the wostate collection
    and shows dirty and as new state.
    Also a button to show more info which pops up a dialog showing the entire state history in a data table 

    TODO: POC for now don't worry about rights to unset / set certain states, just hook it up for testing
    todo: show completing states with a checkmark icon, show locking states with a lock icon
    todo: show states in color as selected (but in some way that is contrasting to avoid invisibility)
    todo: show current state separate from selection box, selection box only shows available to user states
    todo: it must be clear to user why they can not change if they have too low a role to change, perhaps text under state instead of selector box that says "Only select roles can change this state"

    -->
  </div>
</template>
<script>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*  XXXeslint-disable    */
////////////////////////////////////////////////////////////////////////////////////////////////////////////

export default {
  data() {
    return {
      selectedStatus: null
    };
  },

  props: {
    value: {
      default: null,
      type: Object
    },
    pvm: {
      default: null,
      type: Object
    },
    formKey: { type: String, default: "" }, //used to grab template from store
    readonly: Boolean,
    disabled: Boolean
  },

  methods: {
    form() {
      return window.$gz.form;
    },
    fieldValueChanged(ref) {
      if (!this.pvm.formState.loading && !this.pvm.formState.readonly) {
        window.$gz.form.fieldValueChanged(this.pvm, ref);
      }
    }
  },
  computed: {
    hasState() {
      return this.value.states != null && this.value.states.length > 0;
    },
    currentState() {
      //return actual status object from top level shell based on current state
      //if state is unknown then it should return a placeholder dummy state showing an error condition or empty I guess

      if (this.value.states != null) {
        //find it in the status collection
        //and return here
        let laststate = this.value.states[this.value.states.length - 1];
        let found = this.pvm.selectLists.wostatus.find(
          z => z.id == laststate.workOrderStatusId
        );
        if (found) {
          return found;
        }
      }
      //default
      return {
        id: 0,
        name: "NOT SET YET",
        active: true,
        color: "#ffffff", //invisible
        completed: false,
        locked: false
      };
    },
    canAdd: function() {
      return (
        !this.value.isLocked &&
        this.pvm.rights.change &&
        this.pvm.subRights.states.create
      );
    }
  }
};
</script>
