<template>
  <ul class="filter-list" :class="styleClass">
    <li>
      <RouterLink :to="{ name: 'searchResult' }" class="text-title-QSection1"
        >قوانین</RouterLink
      >
      <span class="mr-2">❯</span>
    </li>
    <li>
      <RouterLink
        :to="{
          name: 'search-lists',
          params: {
            id: vuexEntityGetter?.qanon_id,
            key: 'qasection',
          },
        }"
        class="text-title-QSection2 mr-2"
      >
        {{ vuexEntityGetter?.qanon_title }}
        <span class="mr-2 ml-2">❯</span>
      </RouterLink>
    </li>
    <li>
      <a v-if="vuexEntityGetter?.other_info?.full_path">{{
        vuexEntityGetter?.other_info.full_path
      }}</a>
    </li>
    <li v-if="filters.length" class="mx-3">
      :حکم =>
    </li>

    <li v-for="(value, index) in filters" :key="value.id" class="">
      <a
        :href="value[keyName]"
        class="btn"
        @click.prevent="onTitleClick(value)"
      >
        {{ normalPathKey(value[keyName]) }}
      </a>

      <span class="arrow-icon mr-2 ml-2">❯</span>

      <!-- <button
        @click.prevent="$emit('remove-filter', value)"
        class="btn remove-filter-btn"
        type="button"
      >
        <span class="mr-2 ml-2">❯</span>
      </button> -->
    </li>
  </ul>
</template>

<script>
import { mapState } from "pinia";

export default {
  props: {
    filters: {
      default() {
        return [];
      },
    },
    keyName: {
      default: "title",
    },
    styleClass: {
      default: "default",
    },
  },
  computed: {
    ...mapState("entity", ["vuexEntityGetter"]),
  },
  methods: {
    normalPathKey(title = "") {
      return title.split(" ").slice(0, 3).join(" ");
    },
    onTitleClick(value) {
      this.$emit("on-title-clicked", value[this.keyName]);
    },
  },
};
</script>
<style lang="scss" scoped>
.filter-list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  list-style: none;
  margin-bottom: 1em;

  li {
    a {
      background-color: transparent;
    }

    &:not(:last-child) {
      a {
        color: #00abff !important;
      }
    }

    &:last-child {
      a {
        cursor: default;
      }
      .arrow-icon {
        display: none;
      }
    }
  }
}
</style>
