const template = html`
  <tbody>
    <tr v-if="first" class="active" @click="open()">
      <!-- <td>{{index}}</td> -->
      <td>{{first.start_time | weekDayName}}</td>
      <td>{{first.start_time| date}}</td>
      <td class="centered">{{first.start_time| time}}</td>
      <td class="centered">{{last.end_time| time}}</td>
      <td class="centered">{{hours}}</td>
      <td v-if="isOpen" class="centered">{{amount}} V</td>
      <td v-if="!isOpen" class="centered">{{amount}} ^</td>
    </tr>
    <tr v-for="d in day" v-if="isOpen">
      <!-- <td>{{index}}</td> -->
      <td></td>
      <td></td>
      <td class="centered">{{d.start_time | time}}</td>
      <td class="centered" v-if="d.end_time">{{d.end_time | time}}</td>
      <td class="centered" v-if="!d.end_time">
        <newtime
          :userId="user_id"
          :time="first.start_time"
          type="out"
        ></newtime>
      </td>

      <td class="centered">{{d.hours}}</td>
      <td class="centered">{{d.amount}}</td>
    </tr>
    <tr v-if="first" v-if="isOpen">
      <!-- <td>{{index}}</td> -->
      <td></td>
      <td></td>
      <td class="centered">
        <newtime :userId="user_id" :time="first.start_time" type="in"></newtime>
      </td>
      <td></td>
      <td class="centered"></td>
      <td class="centered"></td>
    </tr>
  </tbody>
`;

import newtime from "./newTime.js";

export default {
  props: ["day", "user_id"],
  data: function() {
    return {
      hours: 0,
      amount: 0,
      pay: 8,
      isOpen: false,
      first: null,
      last: null
    };
  },
  components: {
    newtime
  },
  methods: {
    open() {
      this.isOpen = !this.isOpen;
    },
    load() {
      this.first = this.day[0];
      this.last = this.day[this.day.length - 1];
      this.hours = this.day.reduce((c, el) => {
        if (!el.end_time) return c;
        if (!el.start_time) return c;
        const start = moment(el.start_time);
        const end = moment(el.end_time);
        const hours = moment.duration(end.diff(start)).asHours();
        el.amount = hours * this.pay;
        el.hours = hours;
        return c + hours;
      }, 0);
      this.amount = this.hours * this.pay;
    }
  },
  mounted() {
    this.load();
  },
  watch: {
    day() {
      this.load();
    }
  },
  filters: {
    date(date) {
      if (!date) return;
      return moment(date).format("DD/MM/YYYY");
    },
    weekDayName(date) {
      if (!date) return;
      return moment(date).format("dddd");
    },
    time(date) {
      if (!date) return;
      return moment(date).format("HH:mm:ss");
    }
  },
  template
};
