<template>
  <router-link
    :is="position >= 0 ? 'router-link' : 'span'"
    :to="{
      name: 'details-signalement-filtre',
      params: {
        slug_type_signal: properties.feature_type.slug,
      },
      query,
    }"
  >
    {{ properties.title || featureId }}
  </router-link>
</template>

<script>

import { mapState } from 'vuex';
import axios from '@/axios-client.js';

export default {

  name: 'FeatureFetchOffsetRoute',

  props: {
    featureId: {
      type: String,
      default: '',
    },
    properties: {
      type: Object,
      default: () => {},
    }
  },

  data() {
    return {
      position: null,
      slug: this.$route.params.slug,
    };
  },
  
  computed: {
    ...mapState('projects', [
      'project'
    ]),
    query() {
      if (this.project) {
        const searchParams = { ordering: this.project.feature_browsing_default_sort };
        if (this.project.feature_browsing_default_filter === 'feature_type') { // when feature_type is the default filter of the project, 
          searchParams['feature_type_slug'] = this.properties.feature_type.slug; // get its slug for the current feature
        }
        if (this.position >= 0) {
          searchParams['offset'] = this.position; // get its slug for the current feature
        }
        return searchParams;
      }
      return {};
    },
  },
  
  created() {
    this.getFeaturePosition(this.featureId)
      .then((position) => {
        if (position >= 0) {
          this.position = position;
        }
      })
      .catch((error) => {
        console.error(error);
      });
  },

  methods: {
    async getFeaturePosition(featureId) {
      const searchParams = new URLSearchParams(this.query);
      const response = await axios.get(`${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.slug}/feature/${featureId}/position-in-list/?${searchParams.toString()}`);
      if (response && response.status === 200) {
        return response.data;
      }
      return null;
    },
  }
};
</script>