<template>
  <b-modal
    id="modal-center"
    centered
    title="Assign 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="smart-list-wrapper mb-2">
          <h6>Agents</h6>
          <div
            class="smart-list-wrapper_item"
            v-for="(v, index) in agents"
            :key="index"
          >
            <div class="d-flex align-items-center justify-content-start w-100">
              <div class="form-check mb-3">
                <input
                  class="form-check-input"
                  type="checkbox"
                  :id="`formCheckcolor${index}`"
                  checked=""
                  v-model="selectedAgents"
                  :value="v.value"
                />
                <img
                  :src="`${Avatar2}`"
                  alt=""
                  class="rounded-circle avatar-xs me-2"
                />
                <label class="form-check-label" :for="`formCheckcolor${index}`">
                  {{ v.label }}
                </label>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </b-modal>
</template>
  <script>
import GrowingLoader from '../components/GrowingLoader.vue';
import MainService from '../service/mainService';
import Avatar2 from '../../images/theme-new/users/avatar-2.jpg';
import { BModal } from 'bootstrap-vue-next';

export default {
  props: {
    showSmartAgentList: {
      type: Boolean,
      required: true,
    },
    formwidgetId: [],
    initialValues: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      Avatar2,
      selectedAgents: [],
      selectedTeams: [],
      showWidget: this.showSmartAgentList,
      agentsLoading: false,
      errorMessage: '',
      agents: [],
      teams: [],
      showcreateForm: false,
      submitted: false,
    };
  },

  methods: {
    async getList() {
      this.errorMessage = '';
      this.agentsLoading = true;
      const {
        data: { data, message, success },
      } = await MainService.getAgents();
      if (!success) {
        this.errorMessage = message;
      } else {
        this.agents = _.map(
          _.filter(
            data,
            ({ isTeam = false, userId }) => !isTeam && !_.isNull(userId),
          ),
          ({ firstname, lastname, userId: value }) => ({
            label: `${firstname} ${lastname}`,
            value,
          }),
        );
      }
      this.agentsLoading = false;
    },
  },
  computed: {
    loading() {
      return this.agentsLoading;
    },
  },
  watch: {
    showWidget(v) {
      if (!v) {
        this.$emit('onAssignAgentsChange', this.selectedAgents);
        this.$emit('onClose');
        this.selectedAgents = [];
        this.agentsLoading = false;
        this.errorMessage = '';
        this.agents = [];
        this.showcreateForm = false;
        this.submitted = false;
      } else {
      }
    },
    showSmartAgentList(v) {
      if (v) {
        this.showWidget = true;
        this.selectedAgents = this.initialValues;
        this.getList();
      }
    },
  },
  components: {
    GrowingLoader,
    BModal
  },
};
</script>