<template>
  <div class="row justify-content-center">
    <div class="col-xl-12">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">Source Details</h4>
          <p class="card-title-desc">Update or change source meta details.</p>
          <b-form @submit.prevent="formSubmit">
            <div class="row">
              <div class="col-md-4">
                <b-form-group
                  class="mb-3"
                  label="Source name"
                  label-for="formrow-sourcename-input"
                >
                  <b-form-input
                    id="formrow-sourcename-input"
                    type="text"
                    placeholder="Source Name"
                    v-model="form.name"
                    name="sourcename"
                    :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-4">
                <b-form-group
                  class="mb-3"
                  label="Source Description"
                  label-for="formrow-Description-input"
                >
                  <b-form-input
                    id="formrow-Description-input"
                    type="text"
                    placeholder="Description Name"
                    v-model="form.description"
                    name="description"
                    :class="{
                      'is-invalid': submitted && $v.form.name.$error,
                    }"
                  ></b-form-input>
                  <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>
              <b-button variant="primary" type="submit">
                <i
                  v-if="sourceState.editSourceLoading"
                  class="bx bx-loader bx-spin font-size-16 align-middle me-2"
                ></i>
                Save</b-button
              >
              <b-button variant="light" >Cancel</b-button>
            </div>
          </b-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { required } from 'vuelidate/lib/validators';
import { BForm,BFormGroup,BFormInput,BButton } from 'bootstrap-vue-next';

export default {
  props: {
    sourceState: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      submitted: false,
      form: {
        name: this.sourceState.sourceDetails
          ? this.sourceState.sourceDetails.name
          : '',
        description: this.sourceState.sourceDetails
          ? this.sourceState.sourceDetails.description
          : '',
      },
    };
  },
  validations: {
    form: {
      name: { required },
      description: { required },
    },
  },
  methods: {
    formSubmit() {
      this.submitted = true;
      // this.$v.$touch();
      // if (this.$v.$invalid) {
      //   return;
      // }
      this.$emit('formSubmit', this.form);
    },
  },
  components: {
    SCphoneWidget,
    SComniWidget,
    BForm,BFormGroup,BFormInput,BButton
  },
};
</script>