<template>
  <b-modal
    id="modal-center"
    centered
    title="Add 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"
        >
          <i class="bx bx-plus attatch-item-icon text-primary" @click="resetMethod">
            <Icon icon="carbon:reset" style="color: #908989" height="15" width="15" />
          </i>
          <span class="attatch-item-icon-label" style="margin-left: 5px"> Reset</span>
        </div>
        <div class="smart-list-wrapper mb-2">
          <div class="mb-3" v-for="(v, index) in computedOmniChannels" :key="index">
            <div class="form-check mb-3">
              <input
                class="form-check-input"
                type="checkbox"
                :id="`formCheckcolor${index}`"
                checked=""
                v-model="selectedIDs"
                :value="v.value"
                :disabled="v.isDisabled"
              />
              <label class="form-check-label" :for="`formCheckcolor${index}`">
                {{ v.label }}
              </label>
            </div>
          </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 class="row">
              <div class="col-md-12">
                <b-form-group class="mb-3" label="" label-for="formrow-Description-input">
                  <b-form-input
                    id="formrow-Description-input"
                    type="text"
                    placeholder="Description"
                    v-model="form.description"
                    name="description"
                    :class="{
                      'is-invalid': submitted && $v.form.description.$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="outline-primary" class="ps-rel" type="submit">
                <i
                  v-if="addOmnichannelsLoading"
                  class="bx bx-loader bx-spin font-size-16 align-middle me-2"
                ></i>
                Create</b-button
              >
            </div>
          </b-form>
        </template>
      </template>
    </div>
  </b-modal>
</template>
<script>
import GrowingLoader from "../../components/GrowingLoader.vue";
import OmniService from "../../service/omniChannelService";
import { required } from "vuelidate/lib/validators";
import { BModal, BForm, BFormGroup, BFormInput, BButton } from "bootstrap-vue-next";
import { Icon } from "@iconify/vue";

export default {
  // mounted() {
  //   this.getList();
  // },
  props: {
    showOmniWidgetList: {
      type: Boolean,
      required: true,
    },
    formwidgetId: {},
    disableCreateNew: {
      type: Boolean,
      required: true,
    },
    unallocatedType: {
      required: false,
    },
    selectableIDs: {
      type: Array,
      required: false,
      default: [],
    },
  },
  data() {
    return {
      showWidget: this.showOmniWidgetList,
      omnichannelsLoading: false,
      errorMessage: "",
      omnichannels: [],
      selectedIDs: [],
      form: {
        name: "",
        description: "",
      },
      showcreateForm: false,
      submitted: false,
      addOmnichannelsLoading: false,
    };
  },
  validations: {
    form: {
      name: { required },
      description: { required },
    },
  },
  methods: {
    resetMethod() {
      console.log("resettt2222");
      this.selectedIDs = [];
      this.submitted = false;
      this.showcreateForm = false;
      this.form = {
        name: "",
        description: "",
      };

      console.log("resettt", this.selectedIDs);
    },
    createNew() {
      console.log("createnewww");
      this.submitted = false;
      this.selectedIDs = [];
      this.showcreateForm = true;
    },
    async getList() {
      this.errorMessage = "";
      this.omnichannelsLoading = true;
      const {
        data: { data, message, success },
      } = await OmniService.getOmniWidgets(
        this.unallocatedType ? this.unallocatedType : undefined
      );
      if (!success) {
        this.errorMessage = message;
      } else {
        this.omnichannels = _.map(data, ({ name: label, id: value }) => ({
          label,
          value,
        }));
      }
      this.omnichannelsLoading = false;
    },
    async formSubmit() {
      this.submitted = true;
      // this.$v.$touch();
      // if (this.$v.$invalid) {
      //   return;
      // }
      this.addOmnichannelsLoading = true;
      const {
        data: { message, success },
      } = await OmniService.createOmniWidget(this.form);
      this.addOmnichannelsLoading = false;
      if (!success) {
        this.errorMessage = message;
      } else {
        this.getList();
        this.submitted = false;
        this.selectedIDs = [];
        this.showcreateForm = false;
        this.form = {
          name: "",
          description: "",
        };
      }
    },
  },
  computed: {
    loading() {
      return this.omnichannelsLoading;
    },
    computedOmniChannels() {
      return _.map(this.omnichannels, (v) => ({
        ...v,
        isDisabled:
          this.selectableIDs.length == 0
            ? true
            : !_.includes(this.selectableIDs, v.value),
      }));
    },
  },
  watch: {
    showWidget(v) {
      if (!v) {
        this.$emit("onClose");
        // this.selectedIDs = null;
        this.submitted = false;
        this.showcreateForm = false;
        this.form = {
          name: "",
          description: "",
        };
      } else {
      }
    },
    showOmniWidgetList(v) {
      if (v) {
        this.showWidget = true;
        this.getList();
        this.selectedIDs = this.formwidgetId;
      }
    },

    selectedIDs(v) {
      this.$emit("selectedID", v);
    },
  },
  components: {
    GrowingLoader,
    BFormInput,
    BModal,
    BForm,
    BFormGroup,
    BButton,
    Icon,
  },
};
</script>