<!-- Сетка параметров объекта (возраст, страна, статус) с иконками -->
<template>
  <div class="info-grid">
    <div
      v-for="(group, gIndex) in groups"
      :key="`s-info-grid-group-${gIndex}`"
      class="info-grid__group"
    >
      <h3 class="info-grid__group-title">{{ group.title }}</h3>
      <p
        v-if="isPlainGroup(group)"
        class="info-grid__plain-text"
      >
        {{ group.items.flatMap(i => i.values.map(v => v.title)).join(', ') }}
      </p>
      <div
        v-else
        class="info-grid__group-items"
      >
        <template
          v-for="(item, index) in group.items.filter(i => !hiddenByUnits.has(i.name))"
          :key="`s-info-grid-item-${gIndex}-${index}`"
        >
          <component
            v-for="(value, vIndex) in (item.values.length ? item.values : [null])"
            :is="item.isFilter && value ? NuxtLink : 'div'"
            :key="`s-info-grid-value-${gIndex}-${index}-${vIndex}`"
            :class="{'--link': item.isFilter && value}"
            :to="item.isFilter && value ? generateLink(link(item, value.name)) : undefined"
            class="info-grid__item"
          >
            <span
              v-if="vIndex === 0"
              class="info-grid__item-title"
            >{{ item.title }}</span>
            <span
              v-if="value"
              :class="[
                {'--success': isSuccess(value.name)},
                {'--warning': isWarning(value.name)}
              ]"
              class="info-grid__item-value"
            >
              <img
                v-if="item.name === 'nationality_iso_codes' && isoCodes"
                :src="`/icons/flags/${isoCodes[vIndex]}.svg`"
                :alt="isoCodes[vIndex]"
                class="info-grid__item-flag"
                width="20"
                height="14"
              >
              <UiIcon
                v-else-if="item.icon"
                :name="item.icon"
                class="info-grid__item-icon"
                prefix="models"
                size="16"
              />
              {{ value.title }}
            </span>
          </component>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { IGroupedParameter, IGroupedParameterItem } from '../../types';

defineProps<{
  groups: IGroupedParameter[]
  isoCodes?: string
}>();

const PLAIN_GROUP_ITEM_NAMES = ['turnons'];

function isPlainGroup(group: IGroupedParameter) {
  return group.items.some(i => PLAIN_GROUP_ITEM_NAMES.includes(i.name));
}

const NuxtLink = resolveComponent('NuxtLink');
const { hiddenByUnits } = useUnits();
const { generateLink } = useGenerateLink();

function link(item: IGroupedParameterItem, value: string) {
  const formattedValue = value.toLowerCase().replace(/\s+/g, '+');

  if (item.kind === 'range') {
    return `/models?filter_${item.name}_from=${formattedValue}&filter_${item.name}_to=${formattedValue}`;
  } else {
    return `/models?filter_${item.name}=${formattedValue}`;
  }
}

function isSuccess(value: string) {
  const values = ['active'];
  return values.includes(value);
}

function isWarning(value: string) {
  const values = ['inactive'];
  return values.includes(value);
}
</script>

<style lang="scss">
.info-grid {
  display: grid;
  row-gap: 28px;
}

.info-grid__group-title {
  @include font-xs;

  margin-bottom: 12px;
  color: $info-grid-group-title;
  line-height: 16px;
  text-transform: uppercase;
  font-weight: 500;
}

.info-grid__group-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.info-grid__item {
  @include font-sm;

  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  border-radius: $radius-lg;
  border: 1px solid $info-grid-item-border;
  overflow: hidden;
}

.info-grid__item-title {
  padding: 6px 10px;
  color: $info-grid-item-title;
  background-color: $info-grid-item-title-bg;
}

.info-grid__item-value {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: 4px;
  padding: 6px 10px;
}

.info-grid__item.--link {
  @include hover(background-color) {
    background-color: $info-grid-item-bg--hover;
  }
}

.info-grid__item.--link .info-grid__item-value {
  background-color: $info-grid-item-value-bg--link;
  color: $info-grid-item-value--link;

  @include from-br(sm) {
    transition: var(--transition) background-color;
  }
}

.info-grid__item.--link:is(:hover, :focus-visible) .info-grid__item-value {
  @media (hover: hover) {
    background-color: $info-grid-item-value-link-bg--hover;
  }
}

.info-grid__item:not(.--link) .info-grid__item-value {
  border-left: 1px solid $info-grid-item-value-border;
  background-color: $info-grid-item-value-bg;
}

.info-grid__item:not(.--link) .info-grid__item-title {
  background-color: $info-grid-item-value-bg;
}

.info-grid__item-value.--success {
  color: $info-grid-item-success;
}

.info-grid__item-value.--warning {
  color: $info-grid-item-warning;
}

.info-grid__item-icon {
  color: $info-grid-item-icon;
  flex-shrink: 0;
}

.info-grid__item-flag {
  flex-shrink: 0;
}

.info-grid__plain-text {
  @include font-sm;

  color: $info-grid-plain-text;
}
</style>
