<template>
  <div
    :data-scrollto="value.id"
    class="survey-block"
    ref="surveyDiv"
  >
    <router-link
      :to="{ name: 'survey', params: { id: value.id } }"
      class="button button--primary"
    >
      Übung anzeigen
    </router-link>
  </div>
</template>

<script setup lang="ts">
import { PAGE_LOAD_TIMEOUT } from '@/consts/navigation.consts';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
export interface Props {
  value: {
    id: string;
  };
}

const props = defineProps<Props>();

const surveyDiv = ref<HTMLElement | null>(null);
const route = useRoute();

onMounted(() => {
  if (surveyDiv.value !== null) {
    if (route.hash === `#${props.value.id}`) {
      setTimeout(() => {
        const rect = surveyDiv.value.getBoundingClientRect();

        window.scrollTo({
          top: rect.y,
          behavior: 'smooth',
        });
      }, PAGE_LOAD_TIMEOUT);
    }
  }
});
</script>

<style scoped lang="scss">
@import '@/styles/_variables.scss';

.survey-block {
  margin-bottom: $large-spacing;
}
</style>
