<template>
  <div>
    <b-form @submit.prevent="formSubmit">
      <div class="row">
        <div class="col-md-2 text-center">
          <div class="mt-4 mt-md-0 mb-3">
            <div class="profile-avatar" v-if="!avatar">
              {{ avatarName }}
            </div>
            <img
              class="rounded-circle avatar-xl"
              alt="200x200"
              :src="renderImageUrl"
              data-holder-rendered="true"
              v-else
            />
          </div>
          <b-button variant="link" class="image-change-button"
            ><input
              class="form-control"
              type="file"
              @change="onChangeAvatar"
            /><span>{{
              !avatar ? 'Upload Avatar' : 'Change Avatar'
            }}</span></b-button
          >
        </div>
        <div class="col-md-10">
          <b-form-group
            class="mb-3"
            label="Partnership name"
            label-for="formrow-partnershipname-input"
          >
            <b-form-input
              id="formrow-partnershipname-input"
              type="text"
              placeholder="Partnership name"
              v-model="form.partnershipName"
              name="partnershipName"
              :class="{
                'is-invalid': submitted && $v.form.partnershipName.$error,
              }"
            ></b-form-input>
            <div
              v-if="submitted && $v.form.partnershipName.$error"
              class="invalid-feedback"
            >
              <span v-if="!$v.form.partnershipName.required"
                >This value is required.</span
              >
            </div>
          </b-form-group>
        </div>
      </div>

      <div class="row">
        <div class="col-md-4">
          <label>Current Default Billing</label>
          <multiselect
            v-model="form.defaultBilling"
            :options="billingTypes"
            :class="{
              'is-invalid': submitted && $v.form.defaultBilling.$error,
            }"
            placeholder="Select billing type"
            label="label"
          ></multiselect>
          <div
            v-if="submitted && $v.form.defaultBilling.$error"
            class="invalid-feedback"
          >
            <span v-if="!$v.form.defaultBilling.required"
              >This value is required.</span
            >
          </div>
        </div>
        <div class="col-md-4">
          <label>Business Type</label>
          <multiselect
            v-model="form.businessType"
            :options="businessTypes"
            :class="{
              'is-invalid': submitted && $v.form.businessType.$error,
            }"
            placeholder="Business Type"
            label="label"
          ></multiselect>

          <div
            v-if="submitted && $v.form.businessType.$error"
            class="invalid-feedback"
          >
            <span v-if="!$v.form.businessType.required"
              >This value is required.</span
            >
          </div>
        </div>
        <div class="col-md-4">
          <label>Partner Type</label>
          <multiselect
            v-model="form.partnerType"
            :options="partnerTypes"
            :class="{
              'is-invalid': submitted && $v.form.partnerType.$error,
            }"
            placeholder="Partner Type"
            label="label"
          ></multiselect>

          <div
            v-if="submitted && $v.form.partnerType.$error"
            class="invalid-feedback"
          >
            <span v-if="!$v.form.partnerType.required"
              >This value is required.</span
            >
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <photoshop-picker v-model="sidebarColor" />
        </div>
        <div class="col-md-6">
          <b-form-group
            class="mb-3"
            label="Partner URL"
            label-for="formrow-partnerurl-input"
          >
            <b-form-input
              id="formrow-partnerurl-input"
              type="text"
              placeholder="Partner URL"
              v-model="form.partnerUrl"
              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.url"
                >Please provide a valid url.</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"
              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="Default System Email"
            label-for="formrow-systememail-input"
          >
            <b-form-input
              id="formrow-partneruseremail-input"
              type="text"
              placeholder="Invite partner user email"
              v-model="form.partneruser"
              name="partneruseremail"
              :class="{
                'is-invalid': submitted && $v.form.partneruseremail.$error,
              }"
            ></b-form-input>
            <div
              v-if="submitted && $v.form.partneruseremail.$error"
              class="invalid-feedback"
            >
              <span v-if="!$v.form.partneruseremail.required"
                >This value is required.</span
              >
              <span v-else-if="!$v.form.partneruseremail.email"
                >Please provide a valid email.</span
              >
            </div>
          </b-form-group>
        </div>
      </div>
    </b-form>
  </div>
</template>
<script>
import { required, email, url } from 'vuelidate/lib/validators';
import Multiselect from 'vue-multiselect';
import * as _ from 'lodash';
import { Photoshop } from 'vue-color';
import { BForm,BButton,BFormGroup,BFormInput} from 'bootstrap-vue-next'



export default {
  components: {
    Multiselect,
    'photoshop-picker': Photoshop,
    BForm,BButton,BFormGroup,BFormInput
  },
  props: {
    billingTypes: {
      type: Array,
      required: true,
    },
    businessTypes: {
      type: Array,
      required: true,
    },
    partnerTypes: {
      type: Array,
      required: true,
    },
    addPartnershipLoading: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      avatar: null,
      form: {
        partnershipName: '',
        defaultBilling: null,
        businessType: null,
        partnerType: null,
        partnerUrl: '',
        systemEmail: '',
        partneruseremail: '',
      },
      sidebarColor: '#2a3042',
      submitted: false,
    };
  },
  validations: {
    form: {
      partnershipName: { required },
      defaultBilling: { required },
      businessType: { required },
      partnerType: { required },
      partnerUrl: { required, url },
      systemEmail: { required, email },
      partneruseremail: { required, email },
    },
  },

  computed: {
    avatarName() {
      if (!this.form.partnershipName) {
        return '';
      }
      return this.form.partnershipName.charAt(0).toUpperCase();
    },
    renderImageUrl() {
      if (this.avatar == null) {
        return null;
      }
      const image =
        typeof this.avatar === 'object'
          ? URL.createObjectURL(this.avatar)
          : this.avatar;
      return image;
    },
  },
  methods: {
    formSubmit() {
      this.submitted = true;
      // this.$v.$touch();
      // if (this.$v.$invalid) {
      //   return;
      // }
      const formData = new FormData();
      formData.append('data', JSON.stringify(this.form));
      if (this.avatar !== null && typeof this.avatar === 'object') {
        formData.append('file', this.avatar);
      }
      this.$emit('formSubmit', formData);
    },
    onChangeAvatar(e) {
      const { files } = e.target;
      if (files && files[0]) {
        if (files[0].type.includes('image')) {
          this.avatar = files[0];
        }
      }
    },
    resetForm() {
      this.form = {
        partnershipName: '',
        defaultBilling: null,
        businessType: null,
        partnerType: null,
        partnerUrl: '',
        systemEmail: '',
        partneruseremail: '',
      };
      this.avatar = null;
    },
  },
};
</script>