<template>
  <div class="row justify-content-center">
    <div class="col-xl-12">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">White-label Configuration</h4>
          <p class="card-title-desc">
            Update or change the partnership white-label configuration
          </p>
          <b-form @submit.prevent="formSubmit">
            <div class="row">
              <div class="col-md-12">
                <b-form-group
                  class="mb-3 form-label"
                  label="Partner Account Signup Link"
                  label-for="formrow-accountsignup"
                >
                  <span
                    id="formrow-accountsignup"
                    class="text-primary"
                    ref="textToCopy"
                  >
                    {{ partnerData.signUpLink }}
                  </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-6">
                <b-form-group
                  class="mb-3"
                  label="Partner Domain"
                  label-for="formrow-partnerurl-input"
                >
                  <b-form-input
                    id="formrow-partnerurl-input"
                    type="text"
                    placeholder="Partner Domain"
                    v-model="form.partnerUrl"
                    :disabled="true"
                    name="partnerUrl"
                    :class="{
                      'is-invalid': submitted && $v.form.partnerUrl.$error,
                    }"
                  ></b-form-input>
                  <div
                    v-if="submitted && $v.form.partnerUrl.$error"
                    class="invalid-feedback"
                  >
                    <span v-if="!$v.form.partnerUrl.required"
                      >This value is required.</span
                    >
                    <span v-else-if="!$v.form.partnerUrl.domainValidator">{{
                      formvalidationMessages.domainvalidatorMessage
                    }}</span>
                  </div>
                </b-form-group>
              </div>
              <div class="col-md-6">
                <b-form-group
                  class="mb-3"
                  label="Default System Email"
                  label-for="formrow-systememail-input"
                >
                  <b-form-input
                    id="formrow-systememail-input"
                    type="text"
                    :disabled="true"
                    placeholder="Default system email"
                    v-model="form.systemEmail"
                    name="systemEmail"
                    :class="{
                      'is-invalid': submitted && $v.form.systemEmail.$error,
                    }"
                  ></b-form-input>
                  <div
                    v-if="submitted && $v.form.systemEmail.$error"
                    class="invalid-feedback"
                  >
                    <span v-if="!$v.form.systemEmail.required"
                      >This value is required.</span
                    >
                    <span v-else-if="!$v.form.partnerUrl.email"
                      >Please provide a valid email.</span
                    >
                  </div>
                </b-form-group>
              </div>
              <div class="col-md-6">
                <b-form-group class="mb-3" label="Select Primary Color">
                  <b-input-group>
                    <template #prepend>
                      <v-input-colorpicker
                        v-model="form.sidebarColor"
                        :style="{ backgroundColor: form.sidebarColor }"
                       
                      />
                    </template>
                    <b-form-input
                      id="formrow-colorpicker-input"
                      type="text"
                      placeholder="Select Primary Color"
                      v-model="form.sidebarColor"
                      name="colorpicker"
                    ></b-form-input>
                  </b-input-group>
                </b-form-group>
              </div>

              <div class="col-md-6">
                <div class="form-check form-switch mb-3 form-switch-lg">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    id="restrictLoginAccess"
                    v-model="form.isExpandedMenu"
                  />
                  <label class="form-check-label" for="restrictLoginAccess"
                    >Display expanded menu as default</label
                  >
                </div>
              </div>
            </div>
            <div>
              <b-button variant="primary" type="submit">
                <i
                  v-if="partnershipWhiteLabelUpdateLoading"
                  class="bx bx-loader bx-spin font-size-16 align-middle me-2"
                ></i>
                Save</b-button
              >
              <b-button variant="light" @click="resetForm">Cancel</b-button>
            </div>
          </b-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { required, email } from 'vuelidate/lib/validators';
import * as _ from 'lodash';
import InputColorPicker from 'vue-native-color-picker';
import { formvalidation, formvalidationMessages } from '../../utils/util';

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


const { domainValidator } = formvalidation;
export default {
  props: {
    partnerData: {
      type: Object,
      required: true,
    },
    partnershipWhiteLabelUpdateLoading: {
      type: Boolean,
      required: true,
    },
  },
  components: {
    // 'v-input-colorpicker': InputColorPicker,
     InputColorPicker,
    BForm,BButton,BFormGroup,BInputGroup,BFormInput,
    BPopover
  },
  data() {
    return {
      formvalidationMessages,
      form: {
        partnerUrl: this.partnerData ? this.partnerData.partnerUrl : '',
        systemEmail: this.partnerData.email,
        sidebarColor: this.partnerData.sidebarColor
          ? this.partnerData.sidebarColor
          : '#2a3042',
        isExpandedMenu: this.partnerData.isExpandedMenu,
      },
      submitted: false,
    };
  },
  validations: {
    form: {
      partnerUrl: { required, domainValidator },
      systemEmail: { required, email },
    },
  },
  methods: {
    copyText() {
      this.selectText(this.$refs.textToCopy); // e.g. <div ref="text">
      document.execCommand('copy');
    },
    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);
      }
    },
    formSubmit() {
      this.submitted = true;
      // this.$v.$touch();
      // if (this.$v.$invalid) {
      //   return;
      // }
      console.log(JSON.stringify(this.form));
      this.$emit('formSubmit', this.form);
    },
    resetForm() {
      this.form = {
        partnershipName: this.partnerData.name,

        partnerUrl: this.partnerData.partnerUrl,
        systemEmail: this.partnerData.email,
        sidebarColor: this.partnerData.sidebarColor
          ? this.partnerData.sidebarColor
          : '#2a3042',
      };
    },
  },
  directives: { 'b-popover': BPopover ,'v-input-colorpicker':InputColorPicker },
};
</script>