<script lang="ts" setup>
import { Ref, computed, ref } from "vue";
import moduleStore from "../store/moduleStore";
import { useI18n } from "vue-i18n";

const dialogVisible: Ref<boolean> = ref(false);
const mobilePage = ref(true);
const { t } = useI18n({ useScope: "global" });

const store = moduleStore();
const tableData = computed(() =>
  store.getAllModules().map((module) => {
    return {
      Course: module.course,
      Module: module.userDefinedName,
    };
  }),
);

const previewOn: Ref<boolean> = computed(() => {
  return moduleStore().modules.size > 0;
});

const columns = computed(() => [
  { field: "Course", header: t("calendarPreview.course") },
  { field: "Module", header: t("calendarPreview.module") },
]);

const updateMobile = () => {
  mobilePage.value = window.innerWidth <= 992;
};

updateMobile();

window.addEventListener("resize", updateMobile);
</script>

<template>
  <Dialog
    id="calendar-dialog"
    ref="calendar"
    :visible="dialogVisible && previewOn"
    :maximizable="!mobilePage"
    :draggable="false"
    :header="$t('calendarPreview.preview-long')"
    class="w-full lg:w-30rem lg:h-auto m-0 lg:m-2"
    position="bottomright"
    @update:visible="dialogVisible = $event"
  >
    <DataTable
      :value="tableData"
      edit-mode="cell"
      table-class="editable-cells-table"
      responsive-layout="scroll"
    >
      <Column
        v-for="column in columns"
        :key="column.field"
        :field="column.field"
        :header="column.header"
        :row-editor="false"
      >
        <template #body="{ data, field }">
          {{ data[field] }}
        </template>
      </Column>
    </DataTable>
  </Dialog>
  <SpeedDial
    v-if="previewOn && !dialogVisible"
    :style="{ position: 'fixed', bottom: '2rem', right: '2rem' }"
  >
    <template #button>
      <Button
        icon="pi pi-calendar"
        :label="$t('calendarPreview.preview')"
        class="p-button-rounded p-button-primary"
        @click="dialogVisible = true"
      />
    </template>
  </SpeedDial>
</template>

<style scoped></style>
