const template = html`
  <span>
    <!-- Button trigger modal -->
    <a data-toggle="modal" :data-target="'#'+id">
      <span>add new 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
            </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.time.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });

    this.timeString = this.time.format("hh:mm");
    this.oldtime = this.time.format("hh:mm");
  },
  components: {},
  filters: {},
  methods: {
    async save() {
      const newTime = this.timeString.split(":");
      const data = {
        time: this.time
          .clone()
          .set({
            hour: '0', //newTime[0],
            minute: '0', // newTime[1],
            second: '0',
            millisecond: '0'
          })
          .format("YYYY-MM-DD HH:mm:ss"),
        user_id: this.userId,
        type: this.type,
        lunch: this.lunch
      };
      const output = await apiV2.post["hr/time-log"]({}, data);
      const timeLogs = await apiV2.get["hr/time-log/"]({
        user_id: this.userId
      });
      state.set(`hr/timeLog/${this.userId}`, timeLogs);
      $(`#${this.id}`).modal("hide");
    }
  },
  template
};
