<template>
  <BModal
    id="workflow-modal"
    centered
    title="Assign to..."
    title-class="font-18"
    hide-footer
    size="sm"
    v-if="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="mb-3" v-for="(v, index) in agents" :key="index">
            <div class="form-check mb-3">
              <input
                class="form-check-input"
                type="checkbox"
                :id="`formCheckcolor${index}`"
                checked=""
                v-model="selectedAgents"
                :value="v.value"
                @change="$emit('selectedAgents', selectedAgents)"
              />
              <label class="form-check-label" :for="`formCheckcolor${index}`">
                {{ v.label }}
              </label>
            </div>
          </div>
          <h6>Teams</h6>
          <div class="mb-3" v-for="(v, index) in teams" :key="index + agents.length">
            <div class="form-check mb-3">
              <input
                class="form-check-input"
                type="checkbox"
                :id="`formCheckcolor${index + agents.length}`"
                checked=""
                v-model="selectedTeams"
                :value="v.value"
                @change="$emit('selectedTeams', selectedTeams)"
              />
              <label
                class="form-check-label"
                :for="`formCheckcolor${index + agents.length}`"
              >
                {{ v.label }}
              </label>
            </div>
          </div>
        </div>
      </template>
    </div>
  </BModal>
</template>
<script>
import GrowingLoader from "../components/GrowingLoader.vue";
import MainService from "../service/mainService";
import { BModal, VBModal } from "bootstrap-vue-next";
//import VueFinalModal from 'vue-final-modal';

export default {
  props: {
    showSmartAgentList: {
      type: Boolean,
      required: true,
    },
    formwidgetId: [],
    initialValues: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      selectedAgents: [],
      selectedTeams: [],
      showWidget: this.showSmartAgentList,
      agentsLoading: false,
      errorMessage: "",
      agents: [],
      teams: [],
      selectedID: [],
      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 }) => !isTeam),
          ({ firstname, lastname, userId: value }) => ({
            label: `${firstname} ${lastname}`,
            value,
          })
        );
        this.teams = _.map(
          _.filter(data, ({ isTeam = true }) => isTeam),
          ({ teamName, userId: value }) => ({
            label: teamName,
            value,
          })
        );
      }
      this.agentsLoading = false;
    },

    reset() {
      this.selectedID = null;
    },
  },
  computed: {
    loading() {
      return this.agentsLoading;
    },
    // triggerAgentUpdateKey() {
    //   return `${this.selectedAgents.length}-${this.selectedTeams.length}`;
    // },
  },
  watch: {
    // triggerAgentUpdateKey() {
    //   this.$emit('selectedMembers', [
    //     ...this.selectedAgents,
    //     ...this.selectedTeams,
    //   ]);
    // },
    showWidget(v) {
      if (!v) {
        this.$emit("onClose");
        this.selectedAgents = [];
        this.selectedTeams = [];
        this.agentsLoading = false;
        this.errorMessage = "";
        this.agents = [];
        this.teams = [];
        this.selectedID = [];
        this.showcreateForm = false;
        this.submitted = false;
      } else {
      }
    },
    showSmartAgentList(v) {
      if (v) {
        this.showWidget = true;
        this.selectedAgents = this.initialValues.agentIds;
        this.selectedTeams = this.initialValues.teamIDs;
        this.getList();
      }
    },
  },
  components: {
    GrowingLoader,
    // VueFinalModal,
    BModal,
  },
  //directives: { 'b-modal': VBModal }
};
</script>