const template = html`
  <div class="widget widget-classic ng-scope">
    <div class="widget-content">
      <div class="headline">
        <h4><i class="fa fa-clock"></i> Time Requests</h4>
      </div>

      <table class="table table-condensed">
        <thead class="table-header">
          <tr>
            <th>Time</th>
            <th>Type</th>
            <th>IP</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in paginatedData()" class="ng-scope">
            <td class="">{{item.time}}</td>
            <td class="">{{item.type}}</td>
            <td class="">{{item.ip_address}}</td>
            <td>
              <div class="text-right" v-if="canApprove">
                <div class="btn-group btn-group-sm">
                  <span
                    class="btn btn-success"
                    @click="update(item.id,'approve')"
                  >
                    Approve
                  </span>
                  <span
                    class="btn btn-danger"
                    @click="update(item.id,'decline')"
                  >
                    Decline
                  </span>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="text-center">
        <ul class="pagination">
          <li class="page-item">
            <a class="page-link" @click="prevPage()">Previous</a>
          </li>
          <li
            class="page-item"
            v-for="i in pageCount()"
            :class="{active:pageNumber==i-1}"
          >
            <a class="page-link" @click="pageNumber = i-1">
              {{i}}
            </a>
          </li>
          <li class="page-item">
            <a class="page-link" @click="nextPage()">Next</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
`;
import requestholiday from "./requestholiday.js";
import editholiday from "./editholiday.js";
import apiV2 from "../../apiV2.js";
export default {
  props: ["userId"],
  data: function() {
    return {
      pageNumber: 0,
      pageSize: 5,
      timeLogs: { data: [] }
    };
  },
  components: {
    requestholiday,
    editholiday
  },
  filters: {
    // takeout the 00-00-00 from dates
    dateLength: function(val) {
      return val.substring(0, 10);
    }
  },
  created() {
    this.load();
  },
  computed: {
    canApprove() {
      return permission.hasPermission("access_hr");
    }
  },
  watch: {
    userId(val, oldVal) {
      this.load();
    }
  },
  methods: {
    async load() {
      const key = `hr/timeLog/${this.userId}`;
      state.sub(key, value => {
        return (this.timeLogs = value.data.filter(
          el => el.pending_change_request
        ));
      });
      const timeLogs = await apiV2.get["hr/time-log"]({
        userId: this.userId
      });
      state.set(key, timeLogs);
    },

    nextPage() {
      if (this.pageNumber == this.pageCount() - 1) return;
      this.pageNumber++;
    },
    prevPage() {
      if (this.pageNumber == 0) return;
      this.pageNumber--;
    },
    pageCount() {
      let l = this.timeLogs.length,
        s = this.pageSize;
      return Math.ceil(l / s);
    },
    paginatedData() {
      const start = this.pageNumber * this.pageSize,
        end = start + this.pageSize;
      return this.timeLogs.slice(start, end);
    },
    async update(id, status) {
      const holiday = await apiV2.put[`hr/time-log/${id}`]({}, { status });
      this.load();
    }
  },
  template
};
