const template = html`
  <div class="widget widget-classic">
    <div class="widget-content">
      <div class="headline">
        <h4><i class="fa fa-clock-o"></i> Your clocking logs</h4>
      </div>
      <table class="table table-condensed">
        <thead>
          <tr>
            <th></th>
            <th></th>

            <th class="centered">
              <i class="fa fa-circle text-success"></i> Clock In
            </th>

            <th class="centered">
              <i class="fa fa-circle text-danger"></i> Clock Out
            </th>
            <th class="centered">Hours</th>
            <th class="centered">Amount</th>
          </tr>
        </thead>
        <day
          v-for="timeLog in timeLogs"
          :day="timeLog"
          :user_id="user_id"
        ></day>
      </table>
    </div>
  </div>
`;
import apiV2 from "/v2/js/apiV2.js";
import state from "/v2/js/state/main.js";
import day from "./day.js";

export default {
  props: ["user_id"],
  data: function() {
    return {
      timeLogs: []
    };
  },
  components: {
    day
  },
  mounted() {
    this.load();
  },
  methods: {
    async load() {
      state.sub("timeLogs", el => (this.timeLogs = el));
      const data = await apiV2.get["hr/time-log"]({
        userId: this.user_id
      });
      const days = {};
      data.data.forEach(el => {
        let key = "";
        if (el.start_time) {
          key = el.start_time.split(" ")[0];
        } else {
          key = el.end_time.split(" ")[0];
        }
        days[key] = days[key] || [];
        days[key].push(el);
      });
      state.set("timeLogs", days);
    }
  },
  template
};
