<!--
Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format.
Copyright (C) 2024 HTWKalender support@htwkalender.de

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
-->

<script lang="ts" setup>
import { computed, inject, Ref, ref } from "vue";
import { useI18n } from "vue-i18n";
import OverlayPanel from "primevue/overlaypanel";
const { t } = useI18n({ useScope: "global" });
const mobilePage = inject("mobilePage") as Ref<boolean>;

const commit = computed(() => ([
  {
    name: t("footer.commitInfo.components.frontend"),
    value: __COMMIT_HASH__,
  },
  //{
  //  name: t("footer.commitInfo.components.backend"),
  //  value: import.meta.env.BACKEND_COMMIT_HASH || "unknown",
  //},
]));

const commitOverlay = ref<OverlayPanel | null>(null);
</script>

<template>
  <Menubar class="footer-bar justify-content-between flex-wrap">
    <template #start>
      <div class="flex align-items-stretch justify-content-center">
        <Button 
          severity="primary"
          class="p-button-text p-button-sm"
          icon="pi pi-fw pi-hashtag"
          v-tooltip="t('footer.commitInfo.tooltip')"
          @click="commitOverlay?.toggle($event)"
          >
        </Button>
        <OverlayPanel class="overlay-panel" ref="commitOverlay" :showCloseIcon="!mobilePage" :dismissable="true">
          <div class="flex flex-column" :class="mobilePage ? 'w-full' : 'w-25rem'">
            <b>{{ t('footer.commitInfo.title') }}</b>
            <p>{{ t('footer.commitInfo.description') }}</p>
            <DataTable
              id="commit-table"
              :value="commit"
              :paginator="false"
              :rows="commit.length"
              :size="mobilePage ? 'small' : 'large'"
              class="w-full"
            >
              <Column field="name" :header="t('footer.commitInfo.component')" />
              <Column field="value" :header="t('footer.commitInfo.hash')" />
            </DataTable>
          </div>
        </OverlayPanel>
      </div>
    </template>
  </Menubar>
</template>

<style scoped>
.footer-bar {
  background-color: transparent;
  border: none;
  box-shadow: none;
  margin: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}

.footer-bar > * {
  pointer-events: auto;
}

.overlay-panel {
  background: yellow;
}
</style>
