<template>
  <div class="item">
    <div class="content">
      <div>
        <router-link
          :to="{
            name: 'details-signalement-filtre',
            params: {
              slug_type_signal: item.properties.feature_type.slug,
            },
            query,
          }"
        >
          {{ item.properties.title || item.id }}
        </router-link>
      </div>
      <div class="description">
        <em>
          [{{ item.properties.created_on }}
          <span v-if="user && item.properties.creator">
            , par
            {{
              item.properties.creator.full_name
                ? item.properties.creator.full_name
                : item.properties.creator.username
            }}
          </span>
          ]
        </em>
      </div>
    </div>
  </div>
</template>

<script>

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

export default {

  name: 'ProjectLastFeatures',

  props: {
    item: {
      type: Object,
      default: () => {},
    }
  },

  data() {
    return {
      position: null,
      slug: this.$route.params.slug,
    };
  },
  
  computed: {
    ...mapState([
      'user'
    ]),
    ...mapState('projects', [
      'project'
    ]),
    query() {
      const searchParams = { ordering: this.project.feature_browsing_default_sort };
      if (this.project && this.project.feature_browsing_default_filter === 'feature_type') { // when feature_type is the default filter of the project, 
        searchParams['feature_type_slug'] = this.item.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;
    },
  },
  
  created() {
    this.getFeaturePosition(this.item.id).then((position) => {
      if (position >= 0) {
        this.position = position;
      }
    });
  },

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