import { get } from 'lodash'
import Modal from '../modal/modal.vue'
import Status from '../status/status.vue'

const StatusHistoryModal = {
  components: {
    Modal,
    Status
  },
  data() {
    return {
      statuses: []
    }
  },
  computed: {
    modalActivated() {
      return this.$store.state.statusHistory.modalActivated
    },
    params() {
      return this.$store.state.statusHistory.params
    },
    statusId() {
      return this.params.id
    },
    historyCount() {
      return this.statuses.length
    },
    history() {
      return this.statuses
    }
  },
  watch: {
    params(newVal, oldVal) {
      const newStatusId = get(newVal, 'id') !== get(oldVal, 'id')
      if (newStatusId) {
        this.resetHistory()
      }

      if (
        newStatusId ||
        get(newVal, 'edited_at') !== get(oldVal, 'edited_at')
      ) {
        this.fetchStatusHistory()
      }
    }
  },
  methods: {
    resetHistory() {
      this.statuses = []
    },
    fetchStatusHistory() {
      this.$store.dispatch('fetchStatusHistory', this.params).then((data) => {
        this.statuses = data
      })
    },
    closeModal() {
      this.$store.dispatch('closeStatusHistoryModal')
    }
  }
}

export default StatusHistoryModal
