const template = html`
  <span>
    <!-- Button trigger modal -->
    <a data-toggle="modal" :data-target="'#'+id">
      <span>add new</span>
    </a>

    <!-- Modal -->
    <div
      class="modal fade"
      :id="id"
      tabindex="-1"
      role="dialog"
      :aria-labelledby="id+'Label'"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" :id="id+'Label'">
              new time log {{time}}
            </h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>{{type}}</p>
              <input type="time" required v-model="timeString" />
            </p>
                        <p>is lunch</p>
            <input
              type="checkbox"
              class="form-check-input"
              id="exampleCheck1"
              v-model="lunch"
            />
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">
              cancel
            </button>
            <button type="button" class="btn btn-primary" @click="save()">
              add
            </button>
          </div>
        </div>
      </div>
    </div>
  </span>
`;
import apiV2 from "../../../apiV2.js";

export default {
  props: ["userId", "time", "type"],
  data: function() {
    return {
      id: Math.random()
        .toString(36)
        .substring(7),
      timeString: "00:00",
      oldtime: "00:00",
      lunch: false
    };
  },
  mounted() {
    if (!this.userId) return;
    this.isnew = false;

    this.timeString = moment(this.time).format("hh:mm");
    this.oldtime = moment(this.time).format("hh:mm");
  },
  components: {},
  filters: {},
  methods: {
    async save() {
      const newTime = this.timeString.split(":");
      let time = moment(this.time);
      time.set("hour", newTime[0]);
      time.set("minute", newTime[1]);
      time.set("second", 0);
      time.set("millisecond", 0);
      time = time.format("YYYY-MM-DD hh:mm");
      this.type = this.type == "in" ? "clockin" : "clockout";

      const data = {
        startTime: time
      };
      const output = await apiV2.post[`hr/time-log/${this.type}`]({}, data);
      const key = `hr/timeLog/${this.userId}`;
      const timeLogs = await apiV2.get["hr/time-log"]({
        userId: this.userId
      });
      state.set(key, timeLogs);
      $(`#${this.id}`).modal("hide");
    }
  },
  template
};
