<template>
  <b-form @submit="submitForm">
    <b-form-group id="id-group" label-for="id" label="Record ID">
      <b-form-input id="id" v-model="record.record_id" required trim disabled>
      </b-form-input>
    </b-form-group>
    <b-form-group id="project-group" label-for="project" label="Project">
      <b-form-select
        id="project"
        v-model="record.project_id"
        :options="selectableProjects"
        required
      >
      </b-form-select>
    </b-form-group>
    <b-form-group id="startdate-group" label="Start date" label-for="startdate">
      <b-form-datepicker
        id="startdate"
        v-model="times.start.date"
        required
        placeholder="Choose a start date"
        :max="times.end.date"
        dark
      >
      </b-form-datepicker>
    </b-form-group>
    <b-form-group id="starttime-group" label="Start time" label-for="starttime">
      <b-form-timepicker
        id="starttime"
        v-model="times.start.time"
        required
        placeholder="Choose a start time"
        dark
      >
      </b-form-timepicker>
    </b-form-group>
    <b-form-group id="enddate-group" label="End date" label-for="enddate">
      <b-form-datepicker
        id="enddate"
        v-model="times.end.date"
        required
        placeholder="Choose an end date"
        :min="times.start.date"
        dark
      >
      </b-form-datepicker>
    </b-form-group>
    <b-form-invalid-feedback :state="!failed">
      Something went wrong.
    </b-form-invalid-feedback>
    <b-button variant="primary" type="submit" class="right" :disabled="working">
      <b-spinner v-if="working" small />
      Save
    </b-button>
    <b-card class="mt-3" header="Form Data Result">
      <pre class="m-0">{{ record }}</pre>
    </b-card>
    <b-card class="mt-3" header="Form Data Result">
      <pre class="m-0">{{ times }}</pre>
    </b-card>
  </b-form>
</template>

<script>
import store from "@/store";

export default {
  name: "FormRecordDetails",
  props: {
    record: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      times: {
        start: {},
        end: {}
      },
      selectableProjects: [],
      failed: false,
      working: false
    };
  },
  methods: {
    /**
     * Submits the form. Assupmtion: Form is valid, based on required flags.
     */
    submitForm: function(e) {
      e.preventDefault();
      this.failed = false;
      this.working = true;

      return false;
    }
  },
  created: function() {
    // Load selectable projects
    var projects = [];
    Object.values(store.getters.projects).forEach(project => {
      projects.push({ value: project.project_id, text: project.name });
    });
    this.selectableProjects = projects;

    // Load record times
    let dateAndTime = /([0-9-]*)\s([0-9:]*)/;
    var startMatch = String(this.record.start_time).match(dateAndTime);
    this.times.start.date = startMatch[1];
    this.times.start.time = startMatch[2];

    var endMatch = String(this.record.end_time).match(dateAndTime);
    if (endMatch !== null) {
      this.times.end.date = endMatch[1];
      this.times.end.time = endMatch[2];
    } else {
      this.times.end.date = new Date().toISOString();
      this.times.end.time = new Date().toTimeString();
    }
  }
};
</script>

<style lang="sass">
.left
    float: left !important

.right
    float: right !important
</style>
