<script setup>
import MobileFullscreenDialog from "aleksis.core/components/generic/dialogs/MobileFullscreenDialog.vue";
import SecondaryActionButton from "aleksis.core/components/generic/buttons/SecondaryActionButton.vue";
</script>

<template>
  <mobile-fullscreen-dialog
    v-model="dialog"
  >
    <template #activator>
      <secondary-action-button
        i18n-key="alsijil.coursebook.print"
        icon-text="$print"
        :loading="loading"
        @click="dialog=true"
        :disabled="dialog"
      />
    </template>
    <template #title>
      {{ $t("alsijil.coursebook.print_title") }}
    </template>
    <template #content>
      <v-autocomplete
        :items="availableGroups"
        item-text="name"
        item-value="id"
        :value="value"
        @input="setGroupSelection"
        @click:clear="setGroupSelection"
        multiple
        chips
        deletable-chips
      />
    </template>
  </mobile-fullscreen-dialog>
</template>

<script>
/**
 * This component provides a dialog for configuring the coursebook-printout
 */
export default {
  name: "CoursebookPrintDialog",
  props: {
    /**
     * Groups available for selection
     */
    availableGroups: {
      type: Array,
      required: true,
    },
    /**
     * Initially selected groups
     */
    value: {
      type: Array,
      required: false,
      default: [],
    },
    /**
     * Loading state
     */
    loading: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  emits: ["input"],
  data() {
    return {
      dialog: false,
      currentGroupSelection: [],
    };
  },
  computed: {
    selectedGroups() {
      if (this.currentGroupSelection.length == 0) {
        return this.value.map((group) => group.id);
      } else {
        return this.currentGroupSelection;
      }
    },
  },
  methods: {
    setGroupSelection(groups) {
      this.$emit("input", groups);
      this.currentGroupSelection=groups;
      console.log(groups);
    },
  },
};
</script>