<template>
  <div class="box" :style="{'background-color': this.isConfirmed ? '#078f12' : '#ff4242'}">
    <div class="box-header">
      <h3 class="text-center">{{itemText}}</h3>
    </div>
    <div class="box-body">
      <select class="form-control" @change="updateSelectedDocHeader($event)">
        <option>{{firstValue}}</option>
        <option v-for="headerObj in filteredHeaders" :key="headerObj.header.documentHeader" :value="headerObj.index">{{headerObj.header.documentHeader}}</option>
      </select>
      <button type="button" class="btn btn-primary" @click="changeA" :disabled="this.selectedDocHeaderIndex === null">Confirm Choice</button>
    </div>
  </div>
  
</template>

<script>
import { store } from '@/store';

export default {
  props: {
    itemText: {
      type: String,
      required: true
    },
  },
  data() {
      return {
          backgroundColor: "#ff6666",
          selectedDocHeaderIndex: null,
          isConfirmed: false,
          store
      }
  },
  methods: {
    updateSelectedDocHeader(event) {
      if (this.isConfirmed) { this.$emit('header-change', -1); }
      this.isConfirmed = false;
      // If the old index is not null, we need to update it's docHeader to be null
      if (this.selectedDocHeaderIndex!== null) {
        this.store.documentHeaders[this.selectedDocHeaderIndex].swapTemplateHeader(null);
      }
      this.selectedDocHeaderIndex = event.target.value;
      console.log(this.selectedDocHeaderIndex);
      
    },
    changeA() {
      // Change the templateHeader in the docHeader at selectedDocHeader
      this.isConfirmed = true;
      this.store.documentHeaders[this.selectedDocHeaderIndex].templateHeader = this.store.documentHeaders;
      this.$emit('header-change', 1);
    }
  },
  computed: {
    filteredHeaders() {
      return this.store.documentHeaders.filter(header => {
        return !header.isSet();
      }).map(header => {
        return {
          index: this.store.documentHeaders.indexOf(header),
          header: header,
        };
      });
    },
    firstValue() {
      return this.isConfirmed ? this.store.documentHeaders[this.selectedDocHeaderIndex].documentHeader : null
    }
  }
}
  </script>
  
  <style>
  .box {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    text-align: center;
  }
  </style>
  