<template>
  <div class="row justify-content-center">
    <div class="col-xl-12">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">Schedule & Availability Information</h4>
          <p class="card-text-desc">
            Update your schedule and availability information to ensure you are
            available at the correct times
          </p>
          <div
            role="alert"
            aria-live="polite"
            aria-atomic="true"
            class="alert alert-info"
          >
            Your current timezone is {{ profileData.timeZoneId }}. To update
            your timezone please visit the
            <a @click.prevent="$emit('selectTabIndex', 0)"
              ><strong>Personal Information</strong></a
            >
            section.
          </div>
          <!-- <div class="row">
            <div class="col-md-5">
              <div class="mt-2 mb-3">
                <label>Timezone</label>
                <multiselect
                  v-model="timeZoneId"
                  @input="resetFormErrors"
                  :options="timeZones"
                  placeholder="Select timezone"
                  label="label"
                  :class="{
                    'is-invalid': submitted && !timzoneFieldValid,
                  }"
                ></multiselect>
                <div
                  v-if="submitted && !timzoneFieldValid"
                  class="invalid-feedback-custom"
                >
                  <span>This value is required.</span>
                </div>
              </div>
            </div>
          </div> -->
          <div class="row">
            <div class="col-md-5">
              <div class="form-check form-switch mb-3 form-switch-lg d-flex">
                <input
                  class="form-check-input"
                  type="checkbox"
                  id="availableAllHours"
                  v-model="availableAllHours"
                />
                <label class="form-check-label" for="availableAllHours"
                  >Available all hours</label
                >
              </div>
            </div>
          </div>
          <div class="table-responsive mb-3">
            <table class="table mb-0">
              <thead class="table-light">
                <tr>
                  <th>Available Days</th>
                  <th>Available From</th>
                  <th>Available To</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(v, index) in availInfo" :key="index">
                  <th scope="row">
                    <div class="form-check form-switch mb-3 form-switch-lg">
                      <input
                        class="form-check-input"
                        type="checkbox"
                        v-model="v.is_active"
                        :disabled="v.disabled"
                      />
                      <label class="form-check-label">{{ v.label }}</label>
                    </div>
                  </th>
                  <td>
                    <date-picker
                      v-model="v.start"
                      format="hh:mm a"
                      value-type="format"
                      type="time"
                      placeholder="hh:mm a"
                      :disabled="v.disabled"
                      :input-class="
                        submitted && v.startRequired
                          ? 'mx-input parsley-error'
                          : 'mx-input'
                      "
                      @change="resetFormErrors"
                    ></date-picker>
                    <div
                      v-if="submitted && v.startRequired"
                      class="invalid-feedback-custom"
                    >
                      <span>This value is required.</span>
                    </div>
                  </td>
                  <td>
                    <date-picker
                      v-model="v.stop"
                      format="hh:mm a"
                      value-type="format"
                      type="time"
                      placeholder="hh:mm a"
                      :disabled="v.disabled"
                      @change="resetFormErrors"
                      :input-class="
                        submitted && v.stopRequired
                          ? 'mx-input parsley-error'
                          : 'mx-input'
                      "
                    ></date-picker>
                    <div
                      v-if="submitted && v.stopRequired"
                      class="invalid-feedback-custom"
                    >
                      <span>This value is required.</span>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div>
            <b-button variant="primary" @click="submit">
              <i
                class="bx bx-loader bx-spin font-size-16 align-middle me-2"
                v-if="scheduleSubmitloading"
              ></i>
              Save</b-button
            >
            <b-button variant="light">Cancel</b-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Multiselect from 'vue-multiselect';
import DatePicker from 'vue-datepicker-next';
import * as _ from 'lodash';
import { BButton} from 'bootstrap-vue-next'

const initAvailInfo = [
  {
    label: 'Sunday',
    day_id: 0,
    is_active: false,
    start: '08:00 am',
    stop: '05:00 pm',
    disabled: false,
    schedule_id: null,
    startRequired: false,
    stopRequired: false,
  },
  {
    label: 'Monday',
    day_id: 1,
    is_active: false,
    start: '08:00 am',
    stop: '05:00 pm',
    disabled: false,
    schedule_id: null,
    startRequired: false,
    stopRequired: false,
  },
  {
    label: 'Tuesday',
    day_id: 2,
    is_active: false,
    start: '08:00 am',
    stop: '05:00 pm',
    disabled: false,
    schedule_id: null,
    startRequired: false,
    stopRequired: false,
  },
  {
    label: 'Wednesday',
    day_id: 3,
    is_active: false,
    start: '08:00 am',
    stop: '05:00 pm',
    disabled: false,
    schedule_id: null,
    startRequired: false,
    stopRequired: false,
  },
  {
    label: 'Thursday',
    day_id: 4,
    is_active: false,
    start: '08:00 am',
    stop: '05:00 pm',
    disabled: false,
    schedule_id: null,
    startRequired: false,
    stopRequired: false,
  },
  {
    label: 'Friday',
    day_id: 5,
    is_active: false,
    start: '08:00 am',
    stop: '05:00 pm',
    disabled: false,
    schedule_id: null,
    startRequired: false,
    stopRequired: false,
  },
  {
    label: 'Saturday',
    day_id: 6,
    is_active: false,
    start: '08:00 am',
    stop: '05:00 pm',
    disabled: false,
    schedule_id: null,
    startRequired: false,
    stopRequired: false,
  },
];
export default {
  components: {
    Multiselect,
    DatePicker,
    BButton
  },
  props: {
    timeZones: {
      type: Array,
      required: true,
    },
    scheduleData: {
      type: Object,
      required: true,
    },
    scheduleSubmitloading: {
      type: Boolean,
      required: true,
    },
    profileData: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    this.resetComponentInfo();
  },

  data() {
    return {
      submitted: false,
      // timeZoneId: null,
      availableAllHours: false,
      availInfo: initAvailInfo,
      timzoneFieldValid: true,
    };
  },
  methods: {
    submit() {
      this.submitted = true;
      let formIsValid = true;
      if (!this.availableAllHours) {
        this.availInfo = _.map(this.availInfo, (i) => {
          if ((i.is_active && !i.start) || (i.is_active && !i.stop)) {
            formIsValid = false;
          }
          return {
            ...i,
            startRequired: i.is_active && !i.start ? true : false,
            stopRequired: i.is_active && !i.stop ? true : false,
          };
        });
      }
      if (!formIsValid) {
        return;
      }
      this.$emit('form-submit', {
        allHours: this.availableAllHours,
        // timeZone: this.timeZoneId.value,
        availableHours: _.map(this.availInfo, (i) => ({
          day_id: `${i.day_id}`,
          ..._.omit(i, ['disabled', 'startRequired', 'stopRequired', 'label']),
        })),
      });
    },
    resetFormErrors() {
      // this.timzoneFieldValid = true;
      this.submitted = false;
      this.availInfo = _.map(this.availInfo, (i) => {
        return {
          ...i,
          startRequired: false,
          stopRequired: false,
        };
      });
    },
    resetComponentInfo() {
      if (!_.isEmpty(this.scheduleData)) {
        this.availableAllHours = this.scheduleData.allHours;
        if (_.isEmpty(this.scheduleData.availableHours)) {
          this.availInfo = initAvailInfo;
          return;
        }
        const cleanedScheduleData = _.map(
          this.scheduleData.availableHours,
          (i) => ({ ...i, day_id: parseInt(i.day_id) }),
        );
        this.availInfo = _.map(this.availInfo, (i) => {
          const dayInfo = _.find(
            cleanedScheduleData,
            ({ day_id }) => day_id === i.day_id,
          );

          return {
            ...i,
            is_active: dayInfo ? dayInfo.is_active : i.is_active,
            start: dayInfo ? dayInfo.start : i.start,
            stop: dayInfo ? dayInfo.stop : i.stop,
            schedule_id: dayInfo ? dayInfo.schedule_id : i.schedule_id,
          };
        });
      }
    },
  },
  watch: {
    availableAllHours(v) {
      this.availInfo = _.map(this.availInfo, (i) => ({
        ...i,
        disabled: v ? true : false,
      }));
    },
  },
};
</script>