<template>
  <div>
    <v-data-table
      id="timesheets-table"
      :headers="headers"
      :items="rows"
      class="elevation-1"
      hide-actions
    >
      <template v-slot:items="props">
        <td>
          <v-autocomplete
            class="study-autocomplete"
            v-model="props.item.study"
            :items="studies"
            label="Search for a study..."
            persistent-hint
            prepend-icon="book"
            item-text="text"
            item-value="id"
          ></v-autocomplete>
        </td>
        <td class="day-col">
          <v-text-field
            type="number"
            step="0.5"
            min="0"
            max="7.5"
            :input-value="props.item.mondayInput"
            v-model="props.item.mondayInput"
            placeholder="e.g. 7.5"
          ></v-text-field>
        </td>
        <td class="day-col">
          <v-text-field
            type="number"
            step="0.5"
            min="0"
            max="7.5"
            :input-value="props.item.tuesdayInput"
            v-model="props.item.tuesdayInput"
          ></v-text-field>
        </td>
        <td class="day-col">
          <v-text-field
            type="number"
            step="0.5"
            min="0"
            max="7.5"
            :input-value="props.item.wednesdayInput"
            v-model="props.item.wednesdayInput"
          ></v-text-field>
        </td>
        <td class="day-col">
          <v-text-field
            type="number"
            step="0.5"
            min="0"
            max="7.5"
            :input-value="props.item.thursdayInput"
            v-model="props.item.thursdayInput"
          ></v-text-field>
        </td>
        <td class="day-col">
          <v-text-field
            type="number"
            step="0.5"
            min="0"
            max="7.5"
            :input-value="props.item.fridayInput"
            v-model="props.item.fridayInput"
          ></v-text-field>
        </td>
        <td class="day-col">
          <v-text-field
            type="number"
            step="0.5"
            min="0"
            max="7.5"
            :input-value="props.item.saturdayInput"
            v-model="props.item.saturdayInput"
          ></v-text-field>
        </td>
        <td class="day-col">
          <v-text-field
            type="number"
            step="0.5"
            min="0"
            max="7.5"
            :input-value="props.item.sundayInput"
            v-model="props.item.sundayInput"
          ></v-text-field>
        </td>
        <td>
          <v-btn flat icon color="red" @click.prevent="removeRow(props.item)">
            <v-icon>close</v-icon>
          </v-btn>
        </td>
      </template>
    </v-data-table>
    <div class="text-xs-center pt-2">
      <v-btn color="primary" @click.prevent="addRow">Add Row</v-btn>
      <v-btn
        :disabled="!rows.length"
        color="secondary"
        @click.prevent="submitTimesheets"
      >
        Submit
      </v-btn>
    </div>
  </div>
</template>

<script>
export default {
  name: 'timesheets',
  data: () => ({
    studies: [
      { id: 1, text: 'TICTOC' },
      { id: 2, text: 'PIMP' },
      { id: 3, text: 'Core Work' },
      { id: 4, text: 'TARS' },
      { id: 5, text: 'MYRIAD' }
    ],
    headers: [
      {
        text: 'Study',
        sortable: false,
        value: 'study'
      },
      {
        text: 'Monday',
        sortable: false,
        value: 'monday-input'
      },
      {
        text: 'Tuesday',
        sortable: false,
        value: 'tuesday-input'
      },
      {
        text: 'Wednesday',
        sortable: false,
        value: 'wednesday-input'
      },
      {
        text: 'Thursday',
        sortable: false,
        value: 'thursday-input'
      },
      {
        text: 'Friday',
        sortable: false,
        value: 'friday-input'
      },
      {
        text: 'Saturday',
        sortable: false,
        value: 'saturday-input'
      },
      {
        text: 'Sunday',
        sortable: false,
        value: 'sunday-input'
      },
      {
        text: 'Actions',
        sortable: false
      }
    ],
    rows: [
      {
        rowNumber: 1,
        study: null,
        mondayInput: '',
        tuesdayInput: '',
        wednesdayInput: '',
        thursdayInput: '',
        fridayInput: '',
        saturdayInput: '',
        sundayInput: ''
      },
      {
        rowNumber: 2,
        study: null,
        mondayInput: '',
        tuesdayInput: '',
        wednesdayInput: '',
        thursdayInput: '',
        fridayInput: '',
        saturdayInput: '',
        sundayInput: ''
      }
    ]
  }),
  methods: {
    addRow() {
      let newRowNum = this.rows.length + 1;

      this.rows.push({
        rowNumber: newRowNum,
        study: null,
        mondayInput: '',
        tuesdayInput: '',
        wednesdayInput: '',
        thursdayInput: '',
        fridayInput: '',
        saturdayInput: '',
        sundayInput: ''
      });
    },
    removeRow(row) {
      console.log(row);
      this.rows = this.rows.filter(obj => obj.rowNumber !== row.rowNumber);
    },
    submitTimesheets() {
      console.log(this.rows);
      this.$toast.success('Timesheet data saved successfully');
    }
  }
};
</script>

<style lang="scss" scoped>
.study-autocomplete {
  min-width: 160px;
}

// .day-col {
//   min-width: 120px;
// }

#timesheets-table {
  table.v-datatable.v-table {
    table-layout: fixed;
  }
}
</style>