<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="selectedID !== null"
        >
          <!-- <i class="bx bx-reset attatch-item-icon text-primary" @click="reset"></i> -->
          <Icon
            icon="carbon:reset"
            style="color: #908989"
            @click="reset"
            class="text-primary"
          />
          <span class="attatch-item-icon-label" @click="reset" style="margin-left: 5px">
            Reset1</span
          >
        </div>
        <div class="smart-list-wrapper mb-2">
          <div
            class="form-check form-radio-primary mb-3"
            v-for="(v, index) in sources"
            :key="index"
          >
            <input
              class="form-check-input"
              type="radio"
              name="formRadioColor1"
              id="formRadioColor1"
              checked=""
              v-model="selectedID"
              :value="v.value"
              @change="showcreateForm = false"
            />
            <label class="form-check-label" for="formRadioColor1">
              {{ v.label }}
            </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">
              <Icon icon="bx-plus" height="30" />
            </i>

            <span class="attatch-item-icon-label" @click="createNew"> 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>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>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="addSourceLoading"
                  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 SourceService from "../service/source";
import { required } from "@vuelidate/validators";
import { BModal, BButton, BFormGroup, BFormInput, BForm } from "bootstrap-vue-next";
import { Icon } from "@iconify/vue";
import { useVuelidate } from "@vuelidate/core";

export default {
  setup() {
    const v$ = useVuelidate({
      form: {
        name: { required },
        description: { required },
      },
    });

    return { v$ }; // Ensure to return an object with the 'v$' property
  },
  emits: ["onClose", "selectedID", "refetchSource"],
  props: {
    showSmartSourceList: {
      type: Boolean,
      required: true,
    },
    formwidgetId: {},
    disableCreateNew: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      showWidget: this.showSmartSourceList,
      sourceLoading: false,
      errorMessage: "",
      sources: [],
      selectedID: null,
      form: {
        name: "",
        description: "",
      },
      showcreateForm: false,
      submitted: false,
      addSourceLoading: false,
    };
  },
  validations: {
    form: {
      name: { required },
      description: { required },
    },
  },
  methods: {
    createNew() {
      console.log("created");
      this.submitted = false;
      this.selectedID = null;
      this.showcreateForm = true;
    },
    async getList() {
      this.errorMessage = "";
      this.sourceLoading = true;
      const {
        data: { data, message, success },
      } = await SourceService.getSources();
      if (!success) {
        this.errorMessage = message;
      } else {
        this.sources = _.map(data, ({ name: label, id: value }) => ({
          label,
          value,
        }));
      }
      this.sourceLoading = false;
    },
    async formSubmit() {
      this.submitted = true;
      this.v$.$touch();
      if (this.v$.$invalid) {
        return;
      }
      this.addSourceLoading = true;
      const {
        data: { message, success },
      } = await SourceService.createSource(this.form);
      this.addSourceLoading = false;
      if (!success) {
        this.errorMessage = message;
      } else {
        this.$emit("refetchSource");
        this.getList();
        this.submitted = false;
        this.selectedID = null;
        this.showcreateForm = false;
        this.form = {
          name: "",
          description: "",
        };
      }
    },
    reset() {
      console.log("resett11");
      this.selectedID = null;
      this.submitted = false;
      this.showcreateForm = false;
      this.form = {
        name: "",
        description: "",
      };
    },
  },
  computed: {
    loading() {
      return this.sourceLoading;
    },
  },
  mounted() {
    console.log("showWidget", this.showWidget);
  },
  watch: {
    showWidget(v) {
      if (!v) {
        this.$emit("onClose");
        // this.selectedID = null;
        this.submitted = false;
        this.showcreateForm = false;
        this.form = {
          name: "",
          description: "",
        };
      } else {
      }
    },
    showSmartSourceList(v) {
      if (v) {
        this.showWidget = true;
        this.getList();
        if (this.formwidgetId?.source) {
          this.selectedID = this.formwidgetId?.source;
        }
      }
    },

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