<template>
  <div>
    <span class="text-caption">{{ $ay.t("WorkOrderStatus") }}</span>
    <template v-if="hasState">
      <br />
      {{ currentState.color }}
      <v-icon large :color="currentState.color">$ayiFlag</v-icon
      ><span class="text-h5">{{ currentState.name }}</span>
      <v-icon large v-if="currentState.locked">$ayiLock</v-icon>
      <v-icon large v-if="currentState.completed">$ayiCheckCircle</v-icon>
    </template>
    <div>
      {{ pvm.selectLists.wostatus }}
      <template v-if="canAdd">
        <h5>editable state here</h5>
      </template>
    </div>

    <!-- 
    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 {};
  },

  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.parentVM.formState.loading &&
        !this.parentVM.formState.readonly
      ) {
        window.$gz.form.fieldValueChanged(this.parentVM, 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) {
        //Not set yet so return not set state
        return {
          id: 0,
          name: "NOT SET YET",
          active: true,
          color: "#000000",
          completed: false,
          locked: false
        };
      } else {
        //find it in the states collection
        //pvm.selectLists.wostates
        //and return here
        //return this.value.states[this.value.states.length - 1];
      }
    },
    canAdd: function() {
      return (
        !this.value.isLocked &&
        this.pvm.rights.change &&
        this.pvm.subRights.states.create
      );
    }
  }
};
</script>
