<template>
  <b-modal
    id="modal-center"
    centered
    title="Attach tags to..."
    title-class="font-18"
    hide-footer
    size="sm"
    v-model="showWidget"
  >
    <div class="height-set smart-list">
      <div class="spinner-main">
        <growing-loader :isMini="true" v-if="loading"></growing-loader>
      </div>
      <template v-if="!loading">
        <!-- <div
          class="d-flex align-items-center mb-3 justify-content-end"
          v-if="selectedIDs.length === 0"
        >
          <i
            class="bx bx-reset attatch-item-icon text-primary"
            @click="reset"
          ></i>
          <span class="attatch-item-icon-label"> Reset</span>
        </div> -->
        <div class="smart-list-wrapper mb-2">
          <h6>User Tags</h6>
          <div class="mb-3" v-for="(v, index) in tags" :key="index">
            <div class="form-check mb-3">
              <input
                class="form-check-input"
                type="checkbox"
                :id="`formCheckcolor${index}`"
                checked=""
                v-model="selectedIDs"
                :value="v.sid"
              />
              <label class="form-check-label" :for="`formCheckcolor${index}`">
                {{ v.name }}
              </label>
            </div>
          </div>
          <template v-if="!disableCreateNew">
            <div class="d-flex align-items-center mb-3" v-if="!showcreateForm">
              <i
                class="bx bx-plus attatch-item-icon text-primary"
                @click="createNew"
              ></i>
              <span class="attatch-item-icon-label"> Create new</span>
            </div>
            <b-form @submit.prevent="formSubmit" v-else>
              <div class="row">
                <div class="col-md-12">
                  <b-form-group
                    class="mb-3"
                    label=""
                    label-for="formrow-sourcename-input"
                  >
                    <b-form-input
                      id="formrow-sourcename-input"
                      type="text"
                      placeholder="Name"
                      v-model="form.name"
                      name="widgetname"
                      :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>
                <b-button
                  variant="outline-primary"
                  class="ps-rel"
                  type="submit"
                >
                  <i
                    v-if="addTagLoading"
                    class="bx bx-loader bx-spin font-size-16 align-middle me-2"
                  ></i>
                  Create</b-button
                >
              </div>
            </b-form>
          </template>
        </div>
      </template>
    </div>
  </b-modal>
</template>
<script>
import GrowingLoader from '../components/GrowingLoader.vue';
import WorkflowService from '../service/workflowService';
import { required } from 'vuelidate/lib/validators';
import { BModal,BForm,BFormGroup,BButton,BFormInput } from 'bootstrap-vue-next';

export default {
  props: {
    showSmartTagsList: {
      type: Boolean,
      required: true,
    },
    formwidgetId: [],
    initialValues: {
      type: Array,
      required: true,
    },
    disableCreateNew: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      showWidget: this.showSmartTagsList,
      tagsLoading: false,
      errorMessage: '',
      tags: [],
      selectedIDs: [],
      showcreateForm: false,
      submitted: false,
      addTagLoading: false,
      form: {
        name: '',
      },
    };
  },
  validations: {
    form: {
      name: { required },
    },
  },

  methods: {
    createNew() {
      this.submitted = false;
      // this.selectedIDs = [];
      this.showcreateForm = true;
    },
    async getList() {
      this.errorMessage = '';
      this.tagsLoading = true;
      const {
        data: { data, message, success },
      } = await WorkflowService.getContactTags();
      if (!success) {
        this.errorMessage = message;
      } else {
        this.tags = data;
      }
      this.tagsLoading = false;
    },
    async formSubmit() {
      this.submitted = true;
      // this.$v.$touch();
      // if (this.$v.$invalid) {
      //   return;
      // }
      this.addTagLoading = true;
      const {
        data: { message, success },
      } = await WorkflowService.createContactTag(this.form);
      this.addTagLoading = false;
      if (!success) {
        this.errorMessage = message;
      } else {
        this.$emit('refetchTags');
        this.getList();
        this.submitted = false;
        this.selectedIDs = [];
        this.showcreateForm = false;
        this.form = {
          name: '',
        };
      }
    },
    reset() {
      this.selectedIDs = [];
      this.submitted = false;
      this.showcreateForm = false;
      this.form = {
        name: '',
      };
    },
  },
  computed: {
    loading() {
      return this.tagsLoading;
    },
  },
  watch: {
    showWidget(v) {
      if (!v) {
        this.$emit('onClose');
        // this.selectedIDs = [];

        this.tagsLoading = false;
        this.errorMessage = '';

        this.showcreateForm = false;
        this.submitted = false;
        this.form = {
          name: '',
        };
      } else {
      }
    },
    showSmartTagsList(v) {
      if (v) {
        this.showWidget = true;
        this.selectedIDs = this.initialValues;
        this.getList();
      }
    },
    selectedIDs: {
      handler: function (v, prevV) {
        if (this.showWidget) {
          this.$emit('selectedID', v);
        }

        this.showcreateForm = false;
      },
      deep: true,
    },
    // initialValues: {
    //   handler: function (v, prevV) {
    //     this.selectedIDs = v;
    //   },
    //   deep: true,
    // },
  },
  components: {
    GrowingLoader,
    BModal,BForm,BFormGroup,BButton,BFormInput
  },
};
</script>