<template>
  <q-dialog ref="dialog" @hide="onHide">
    <q-card style="width: 50vw; max-width: 50vw">
      <q-bar>
        Policy Exclusions for {{ policy.name }}
        <q-space />
        <q-btn dense flat icon="close" v-close-popup>
          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
        </q-btn>
      </q-bar>
      <q-form ref="form" @submit.prevent="onSubmit">
        <q-card-section>
          <q-select
            label="Excluded Clients"
            dense
            options-dense
            outlined
            multiple
            v-model="localPolicy.excluded_clients"
            :options="clientOptions"
            use-chips
            map-options
            emit-value
          />
        </q-card-section>
        <q-card-section>
          <q-select
            label="Excluded Sites"
            dense
            options-dense
            outlined
            multiple
            v-model="localPolicy.excluded_sites"
            :options="siteOptions"
            use-chips
            map-options
            emit-value
          >
            <template v-slot:option="scope">
              <q-item
                v-if="!scope.opt.category"
                v-bind="scope.itemProps"
                v-on="scope.itemProps.itemEvents"
                class="q-pl-lg"
              >
                <q-item-section>
                  <q-item-label v-html="scope.opt.label"></q-item-label>
                </q-item-section>
              </q-item>
              <q-item-label v-if="scope.opt.category" v-bind="scope.itemProps" header class="q-pa-sm">{{
                scope.opt.category
              }}</q-item-label>
            </template>
          </q-select>
        </q-card-section>
        <q-card-section>
          <q-select
            label="Excluded Agents"
            dense
            options-dense
            outlined
            multiple
            v-model="localPolicy.excluded_agents"
            :options="agentOptions"
            use-chips
            map-options
            emit-value
          >
            <template v-slot:option="scope">
              <q-item v-if="!scope.opt.category" v-bind="scope.itemProps" v-on="scope.itemEvents" class="q-pl-lg">
                <q-item-section>
                  <q-item-label v-html="scope.opt.label"></q-item-label>
                </q-item-section>
              </q-item>
              <q-item-label v-if="scope.opt.category" v-bind="scope.itemProps" header class="q-pa-sm">{{
                scope.opt.category
              }}</q-item-label>
            </template>
          </q-select>
        </q-card-section>

        <q-card-actions align="right">
          <q-btn dense flat label="Cancel" v-close-popup />
          <q-btn dense flat label="Save" color="primary" type="submit" />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<script>
import mixins from "@/mixins/mixins";
export default {
  name: "PolicyExclusions",
  emits: ["hide", "ok", "cancel"],
  props: { policy: !Object },
  mixins: [mixins],
  data() {
    return {
      localPolicy: {
        excluded_clients: [],
        excluded_sites: [],
        excluded_agents: [],
      },
      clientOptions: [],
      siteOptions: [],
      agentOptions: [],
    };
  },
  methods: {
    onSubmit() {
      this.$axios
        .put(`automation/policies/${this.policy.id}/`, this.localPolicy)
        .then(r => {
          this.$q.loading.hide();
          this.onOk();
          this.notifySuccess("Policy exclusions added");
        })
        .catch(e => {
          this.$q.loading.hide();
        });
    },
    getClients() {
      this.$axios
        .get("/clients/clients/")
        .then(r => {
          this.clientOptions = r.data.map(client => ({ label: client.name, value: client.id }));
        })
        .catch(e => {});
    },
    getSites() {
      this.$axios
        .get("/clients/clients/")
        .then(r => {
          r.data.forEach(client => {
            this.siteOptions.push({ category: client.name });
            client.sites.forEach(site => this.siteOptions.push({ label: site.name, value: site.id }));
          });
        })
        .catch(e => {});
    },
    getOptions() {
      this.getClients();
      this.getSites();
      this.agentOptions = this.getAgentOptions();
    },
    show() {
      this.$refs.dialog.show();
    },
    hide() {
      this.$refs.dialog.hide();
    },
    onHide() {
      this.$emit("hide");
    },
    onOk() {
      this.$emit("ok");
      this.hide();
    },
  },
  created() {
    this.getOptions();

    // copy prop data locally
    this.localPolicy.id = this.policy.id;
    this.localPolicy.excluded_clients = this.policy.excluded_clients.map(client => client.id);
    this.localPolicy.excluded_sites = this.policy.excluded_sites.map(site => site.id);
    this.localPolicy.excluded_agents = this.policy.excluded_agents.map(agent => agent.pk);
  },
};
</script>