<template>
  <b-modal
    v-model="showEditModal"
    dialog-class="modal-dialog-slideout"
    :hide-footer="true"
    content-class="rounded-0"
  >
    <template #modal-header>
      <button
        type="button"
        class="btn btn-primary"
        @click="$emit('closeAddEditModal')"
      >
        <i class="bx bx-left-arrow-alt font-size-16 align-middle me-2"></i>
        Close
      </button>
    </template>
    <div class="height-set">
      <div class="spinner-main">
        <Loader :loading="loading"> </Loader>
      </div>
      <div class="row justify-content-center" v-if="!loading">
        <div class="col-xl-12">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Partnership Account Details</h4>
              <p class="card-title-desc">
                Update or change partnership account details.
              </p>
              <b-form @submit.prevent="formSubmit">
                <div class="row">
                  <div class="col-md-12">
                    <b-form-group class="mb-3" label="Name" label-for="name">
                      <b-form-input
                        id="name"
                        type="text"
                        placeholder="Name"
                        v-model="form.name"
                        name="name"
                        :class="{
                          'is-invalid': submitted && $v.form.name.$error,
                        }"
                      ></b-form-input>
                      <div
                        v-if="submitted && $v.form.name.$error"
                        class="invalid-feedback"
                      >
                        <span v-if="!$v.form.name.required"
                          >This value is required.</span
                        >
                      </div>
                    </b-form-group>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12">
                    <b-form-group
                      class="mb-3"
                      label="Description"
                      label-for="description"
                    >
                      <b-form-textarea
                        id="description"
                        rows="3"
                        placeholder="Enter description"
                        v-model="form.description"
                        name="title"
                        :class="{
                          'is-invalid': submitted && $v.form.description.$error,
                        }"
                      ></b-form-textarea>
                      <div
                        v-if="submitted && $v.form.description.$error"
                        class="invalid-feedback"
                      >
                        <span v-if="!$v.form.description.required"
                          >This value is required.</span
                        >
                      </div>
                    </b-form-group>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12">
                    <b-form-group
                      class="mb-3"
                      label="Enter safety information"
                      label-for="description"
                    >
                      <b-form-textarea
                        id="safety_information"
                        rows="3"
                        placeholder="Enter safety information"
                        v-model="form.safety_information"
                        name="title"
                        :class="{
                          'is-invalid':
                            submitted && $v.form.safety_information.$error,
                        }"
                      ></b-form-textarea>
                      <div
                        v-if="submitted && $v.form.safety_information.$error"
                        class="invalid-feedback"
                      >
                        <span v-if="!$v.form.safety_information.required"
                          >This value is required.</span
                        >
                      </div>
                    </b-form-group>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <b-form-group
                      class="mb-3"
                      label="Address One"
                      label-for="address_1"
                    >
                      <b-form-input
                        id="address_1"
                        type="text"
                        placeholder="Address One"
                        v-model="form.address_1"
                        name="address_1"
                        :class="{
                          'is-invalid': submitted && $v.form.address_1.$error,
                        }"
                      ></b-form-input>
                      <div
                        v-if="submitted && $v.form.address_1.$error"
                        class="invalid-feedback"
                      >
                        <span v-if="!$v.form.address_1.required"
                          >This value is required.</span
                        >
                      </div>
                    </b-form-group>
                  </div>
                  <div class="col-md-6">
                    <b-form-group
                      class="mb-3"
                      label="Address Two"
                      label-for="address_2"
                    >
                      <b-form-input
                        id="address_2"
                        type="text"
                        placeholder="Address Two"
                        v-model="form.address_2"
                        name="address_2"
                        :class="{
                          'is-invalid': submitted && $v.form.address_2.$error,
                        }"
                      ></b-form-input>
                      <div
                        v-if="submitted && $v.form.address_2.$error"
                        class="invalid-feedback"
                      >
                        <span v-if="!$v.form.address_2.required"
                          >This value is required.</span
                        >
                      </div>
                    </b-form-group>
                  </div>
                  <div class="col-md-12" v-if="invitation_url">
                    <p class="card-title-desc">
                      Invitation Link : {{ invitation_url }}
                    </p>
                  </div>
                </div>

                <div class="row">
                  <div class="col-md-12">
                    <b-form-group
                      class="mb-3 form-label"
                      label="Partner Account Invitation Url"
                      label-for="formrow-accountsignup"
                    >
                      <span
                        id="formrow-accountsignup"
                        class="text-primary"
                        ref="textToCopy"
                      >
                        {{ invitation_url }}
                      </span>
                      <b-button
                        v-b-popover.top.focus="'Copied!'"
                        variant="light"
                        @click="copyText"
                        >Copy</b-button
                      >
                    </b-form-group>
                  </div>
                </div>

                <div class="row">
                  <div class="col-md-4 mb-3">
                    <b-input-group
                      label="Email"
                      label-for="formrow-email-input"
                    >
                      <template #append>
                        <b-input-group-text>{{
                          `@${partnershipDetails.partnerUrl}`
                        }}</b-input-group-text>
                        <div
                          v-if="submitted && $v.form.email.$error"
                          class="invalid-feedback"
                        >
                          <span v-if="!$v.form.email.required"
                            >This value is required.</span
                          >
                        </div>
                      </template>
                      <b-form-input
                        id="formrow-emailPrefix-input"
                        type="text"
                        placeholder="Email Prefix"
                        v-model="form.email"
                        name="email"
                        :disabled="this.selectedAccount !== null"
                        :class="{
                          'is-invalid': submitted && $v.form.email.$error,
                        }"
                      ></b-form-input>
                    </b-input-group>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-4">
                    <b-form-group class="mb-3" label="City" label-for="city">
                      <b-form-input
                        id="city"
                        type="text"
                        placeholder="City"
                        v-model="form.city"
                        name="city"
                        :class="{
                          'is-invalid': submitted && $v.form.city.$error,
                        }"
                      ></b-form-input>
                      <div
                        v-if="submitted && $v.form.city.$error"
                        class="invalid-feedback"
                      >
                        <span v-if="!$v.form.city.required"
                          >This value is required.</span
                        >
                      </div>
                    </b-form-group>
                  </div>
                  <div class="col-md-4">
                    <b-form-group class="mb-3" label="State" label-for="state">
                      <b-form-input
                        id="state"
                        type="text"
                        placeholder="State"
                        v-model="form.state"
                        name="state"
                        :class="{
                          'is-invalid': submitted && $v.form.state.$error,
                        }"
                      ></b-form-input>
                      <div
                        v-if="submitted && $v.form.state.$error"
                        class="invalid-feedback"
                      >
                        <span v-if="!$v.form.state.required"
                          >This value is required.</span
                        >
                      </div>
                    </b-form-group>
                  </div>
                  <div class="col-md-4">
                    <b-form-group
                      class="mb-3"
                      label="Zip Code"
                      label-for="zip_code"
                    >
                      <b-form-input
                        id="zip_code"
                        type="text"
                        placeholder="Zip Code"
                        v-model="form.zip_code"
                        name="zip_code"
                        :class="{
                          'is-invalid': submitted && $v.form.zip_code.$error,
                        }"
                      ></b-form-input>
                      <div
                        v-if="submitted && $v.form.zip_code.$error"
                        class="invalid-feedback"
                      >
                        <span v-if="!$v.form.zip_code.required"
                          >This value is required.</span
                        >
                      </div>
                    </b-form-group>
                  </div>
                  <div class="col-md-4">
                    <b-form-group
                      class="mb-3"
                      label="Country"
                      label-for="country"
                    >
                      <b-form-input
                        id="country"
                        type="text"
                        placeholder="Country"
                        v-model="form.country"
                        name="zip_code"
                        :class="{
                          'is-invalid': submitted && $v.form.country.$error,
                        }"
                      ></b-form-input>
                      <div
                        v-if="submitted && $v.form.country.$error"
                        class="invalid-feedback"
                      >
                        <span v-if="!$v.form.country.required"
                          >This value is required.</span
                        >
                      </div>
                    </b-form-group>
                  </div>
                  <div class="col-md-4 mb-3">
                    <label for="timezone">Timezone</label>
                    <multiselect
                      v-model="form.timezone"
                      :options="timeZones"
                      :multiple="false"
                      label="label"
                      :class="{
                        'is-invalid': submitted && $v.form.timezone.$error,
                      }"
                    ></multiselect>
                    <div
                      v-if="submitted && $v.form.timezone.$error"
                      class="invalid-feedback"
                    >
                      <span v-if="!$v.form.timezone.required"
                        >This value is required.</span
                      >
                    </div>
                  </div>
                  <div class="col-md-4 mb-3">
                    <label for="timezone">Billing Type</label>
                    <multiselect
                      v-model="form.billing_type"
                      :options="billing_types"
                      :multiple="false"
                      label="label"
                      :class="{
                        'is-invalid': submitted && $v.form.billing_type.$error,
                      }"
                    ></multiselect>
                    <div
                      v-if="submitted && $v.form.billing_type.$error"
                      class="invalid-feedback"
                    >
                      <span v-if="!$v.form.billing_type.required"
                        >This value is required.</span
                      >
                    </div>
                  </div>
                  <div class="col-md-4 mb-3">
                    <label for="timezone">Business Type</label>
                    <multiselect
                      v-model="form.business_type"
                      :options="business_types"
                      :multiple="false"
                      label="label"
                      :class="{
                        'is-invalid': submitted && $v.form.business_type.$error,
                      }"
                    ></multiselect>
                    <div
                      v-if="submitted && $v.form.business_type.$error"
                      class="invalid-feedback"
                    >
                      <span v-if="!$v.form.business_type.required"
                        >This value is required.</span
                      >
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-4">
                    <div
                      class="form-check form-switch mb-3 form-switch-lg d-flex"
                    >
                      <input
                        class="form-check-input"
                        type="checkbox"
                        id="active"
                        v-model="form.active"
                      />
                      <label class="form-check-label" for="isActive"
                        >Is Active</label
                      >
                    </div>
                  </div>
                </div>
                <!-- GENERAL SCHEDULE  -->
                <div class="row">
                  <div class="col-md-12">
                    <h5>General Schedule</h5>
                  </div>
                  <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>

                <!-- SERVICE SCHEDULE  -->
                <div
                  class="row"
                  v-if="
                    form.business_type &&
                    form.business_type.value === 'automotive'
                  "
                >
                  <div class="col-md-12">
                    <h5>Service Schedule</h5>
                  </div>
                  <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="serviceavailableAllHours"
                        v-model="serviceavailableAllHours"
                      />
                      <label
                        class="form-check-label"
                        for="serviceavailableAllHours"
                        >Available all hours</label
                      >
                    </div>
                  </div>
                </div>
                <div
                  class="table-responsive mb-3"
                  v-if="
                    form.business_type &&
                    form.business_type.value === 'automotive'
                  "
                >
                  <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 serviceAvailInfo" :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 class="">
                  <b-button variant="primary" type="submit">
                    <i
                      class="
                        bx bx-loader bx-spin
                        font-size-16
                        align-middle
                        me-2
                      "
                      v-if="addEditLoading"
                    ></i>
                    Save</b-button
                  >
                </div>
              </b-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </b-modal>
</template>
<script>
import { required } from 'vuelidate/lib/validators';
import Loader from '../../components/Loader/loader.vue';
import Multiselect from 'vue-multiselect';
import * as _ from 'lodash';
import PartnershipAcountService from '../../service/partnershipAcountService';
import { toastConfig } from '../../utils/util';
import { scheduleInfo } from './constants';
import DatePicker from 'vue-datepicker-next';

import { BButton,BModal,BForm,BFormGroup,BFormInput,BFormTextarea,BPopover,BInputGroupText,BInputGroup} from 'bootstrap-vue-next'

export default {
  mounted() {
    if (this.selectedAccount !== null) {
      this.getAccountDetails();
    }
  },
  props: {
    partnershipDetails: {},
    selectedAccount: {},
    addEditLoading: {
      type: Boolean,
      required: true,
    },
    timeZones: {
      type: Array,
      required: true,
    },
    billing_types: {
      type: Array,
      required: true,
    },
    business_types: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      availInfo: scheduleInfo,
      serviceAvailInfo: scheduleInfo,
      availableAllHours: false,
      serviceavailableAllHours: false,
      showEditModal: true,
      detailLoading: false,
      submitted: false,
      invitation_url: null,
      form: {
        name: '',
        description: '',
        safety_information: '',
        address_1: '',
        address_2: '',
        city: '',
        state: '',
        zip_code: '',
        country: '',
        timezone: null,
        email: '',
        active: true,
        billing_type: null,
        business_type: null,
        scheduleData: null,
      },
    };
  },
  validations: {
    form: {
      name: { required },
      description: { required },
      timezone: { required },
      email: { required },
      billing_type: { required },
      business_type: { required },
      safety_information: { required },
      address_1: { required },
      address_2: { required },
      city: { required },
      state: { required },
      zip_code: { required },
      country: { required },
    },
  },
  computed: {
    loading() {
      return this.detailLoading;
    },
  },
  methods: {
    copyText() {
      this.selectText(this.$refs.textToCopy); // e.g. <div ref="text">
    },
    selectText(element) {
      var range;
      if (document.selection) {
        // IE
        range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
      } else if (window.getSelection) {
        range = document.createRange();
        range.selectNode(element);
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
      }
    },
    resetComponentInfo(data) {
      if (!_.isEmpty(data.scheduleData)) {
        this.availableAllHours = data.scheduleData.allHours;
        if (_.isEmpty(data.scheduleData.availableHours)) {
          this.availInfo = scheduleInfo;
          return;
        }
        const cleanedScheduleData = _.map(
          data.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,
          };
        });
      }
    },
    resetFormErrors() {
      // this.timzoneFieldValid = true;
      this.submitted = false;
      this.availInfo = _.map(this.availInfo, (i) => {
        return {
          ...i,
          startRequired: false,
          stopRequired: false,
        };
      });
    },
    resetFormErrorsService() {
      // this.timzoneFieldValid = true;
      this.submitted = false;
      this.serviceAvailInfo = _.map(this.serviceAvailInfo, (i) => {
        return {
          ...i,
          startRequired: false,
          stopRequired: false,
        };
      });
    },
    getAccountDetails() {
      this.detailLoading = true;
      PartnershipAcountService.getPartnershipAccountDetails(
        this.selectedAccount,
      )
        .then(({ data: { success, message, data } }) => {
          if (success) {
            this.detailLoading = false;
            this.form = {
              ...data,
              billing_type: _.find(
                this.billing_types,
                ({ value }) => value === data.billing_type,
              ),
              business_type: _.find(
                this.business_types,
                ({ value }) => value === data.business_type,
              ),
              timezone: _.find(
                this.timeZones,
                ({ value }) => value === data.timezone,
              ),
            };
            this.invitation_url = data.invitation_url;
            this.resetComponentInfo(data);
          } else {
            this.$toast.open(toastConfig.toastError(message));
            this.detailLoading = false;
          }
        })
        .catch((e) => {
          this.detailLoading = false;
          this.$toast.open(
            toastConfig.toastError(
              'Something went wrong while adding partnership account!',
            ),
          );
        });
    },
    formSubmit() {
      this.submitted = true;
      let scheduleFormIsValid = true;
      let scheduleServiceFormIsValid = true;
      if (!this.availableAllHours) {
        this.availInfo = _.map(this.availInfo, (i) => {
          if ((i.is_active && !i.start) || (i.is_active && !i.stop)) {
            scheduleFormIsValid = false;
          }
          return {
            ...i,
            startRequired: i.is_active && !i.start ? true : false,
            stopRequired: i.is_active && !i.stop ? true : false,
          };
        });
      }
      if (!this.serviceavailableAllHours) {
        this.serviceAvailInfo = _.map(this.serviceAvailInfo, (i) => {
          if ((i.is_active && !i.start) || (i.is_active && !i.stop)) {
            scheduleServiceFormIsValid = false;
          }
          return {
            ...i,
            startRequired: i.is_active && !i.start ? true : false,
            stopRequired: i.is_active && !i.stop ? true : false,
          };
        });
      }
      if (!scheduleFormIsValid || !scheduleServiceFormIsValid) {
        return;
      }
      // this.$v.$touch();
      // if (this.$v.$invalid) {
      //   return;
      // }
      let formData = {
        ...this.form,
        timezone: this.form.timezone.value,
        billing_type: this.form.billing_type.value,
        business_type: this.form.business_type.value,

        // timeZone: this.timeZoneId.value,
        generalScheduleData: {
          allHours: this.availableAllHours,
          availableHours: _.map(this.availInfo, (i) => ({
            day_id: `${i.day_id}`,
            ..._.omit(i, [
              'disabled',
              'startRequired',
              'stopRequired',
              'label',
            ]),
          })),
        },
      };
      if (
        this.form.business_type &&
        this.form.business_type.value === 'automotive'
      ) {
        formData = {
          ...formData,
          serviceScheduleData: {
            allHours: this.serviceavailableAllHours,
            availableHours: _.map(this.serviceAvailInfo, (i) => ({
              day_id: `${i.day_id}`,
              ..._.omit(i, [
                'disabled',
                'startRequired',
                'stopRequired',
                'label',
              ]),
            })),
          },
        };
      }
      this.$emit('formSubmit', formData);
    },
  },
  components: {
    Loader,
    Multiselect,
    DatePicker,
    BButton,BModal,BForm,BFormGroup,BFormInput,BFormTextarea,BPopover,BInputGroupText,BInputGroup
  },
  watch: {
    availableAllHours(v) {
      this.availInfo = _.map(this.availInfo, (i) => ({
        ...i,
        disabled: v ? true : false,
      }));
    },
    serviceavailableAllHours(v) {
      this.serviceAvailInfo = _.map(this.serviceAvailInfo, (i) => ({
        ...i,
        disabled: v ? true : false,
      }));
    },
  },
};
</script>