<template>
  <component
    :is="component"
    :class="{
      '--active': isActive,
      [`--image-${imageFit}`]: !!item.image,
      '--alphabet': alphabet,
      '--small': mini,
      '--micro': micro,
      '--not-capitalize': item.prefix === 'search' || notCapitalize,
      '--bright': bright
    }"
    :to="href"
    v-bind="{ ...$attrs, ...(component === 'button' ? { type: 'button' } : {}) }"
    :title="name"
    class="ui-chips"
    @click="onButtonClick"
  >
    <UiIcon
      v-if="item.icon"
      :name="item.icon"
      size="16"
    />
    <UiImg
      v-if="item.image"
      :src="item.image"
      :alt="name"
      :class="`--${imageFit}`"
      :width="imageBox.width"
      :height="imageBox.height"
      class="ui-chips__img"
      sizes="20px sm:24px"
    />
    {{ name }}
    <UiIcon
      v-if="((isActive && !alphabet) && !mini && item.resetPath) || withClose"
      class="ui-chips__close"
      name="close"
      size="16"
    />
  </component>
</template>

<script setup lang="ts">
import type { IChipsItem } from '../../types';
import { convertString } from '../../runtime';

const props = defineProps<{
  item: IChipsItem;
  allLink?: boolean;
  alphabet?: boolean;
  active?: boolean;
  withClose?: boolean;
  isLink?: boolean;
  mini?: boolean;
  micro?: boolean;
  bright?: boolean;
  notCapitalize?: boolean;
}>();

const emit = defineEmits<{
  (eventName: 'click'): void;
}>();

const route = useRoute();

const imageFit = computed(() => props.item.imageFit ?? 'cover');

const imageBox = computed(() => imageFit.value === 'contain'
  ? { width: 22, height: 16 }
  : { width: 20, height: 20 });

const component = computed(() => {
  if (props.isLink) {
    if (isActive.value && props.alphabet) {
      return 'span';
    }
    return resolveComponent('NuxtLink');
  }
  return 'button';
});

const { generateLink } = useGenerateLink();

const targetPath = computed(() => {
  if (props.item.value === 'reset') {
    return props.item.resetPath ? `/${props.item.resetPath}` : '/';
  }

  if (props.allLink && props.item.value) {
    return `/${props.item.value}`;
  }

  if (props.item.value && props.item.prefix) {
    return `${props.item.prefix}/${convertString().toSlug(String(props.item.value))}`;
  }

  if (props.item.value === '' && props.item.prefix) {
    return `${props.item.prefix}`;
  }

  return '';
});

const isActive = computed(() => {
  if (props.active) {
    return true;
  }
  if (!props.isLink || !targetPath.value) {
    return false;
  }

  const current = route.path.replace(/^\/|\/$/g, '');
  const target = generateLink(targetPath.value).replace(/^\/|\/$/g, '');

  return current === target;
});

const href = computed<string | undefined>(() => {
  if (!props.isLink) return undefined;

  if (isActive.value && props.alphabet) {
    return undefined;
  }

  if (isActive.value && props.item.resetPath) {
    return generateLink(props.item.resetPath ? `/${props.item.resetPath}` : '/');
  }

  if (targetPath.value) {
    return generateLink(targetPath.value);
  }

  return undefined;
});

function onButtonClick() {
  if (!props.isLink) {
    emit('click');
  }
}

const name = computed(() => {
  if (props.item?.title.toLowerCase() === 'post') {
    return '#';
  }
  return props.item.title;
});
</script>

<style lang="scss">
.ui-chips {
  @include font-sm;

  display: flex;
  align-items: center;
  column-gap: 8px;
  padding-block: 6px;
  padding-inline: 12px;
  height: var(--chips-height);
  color: $chips-text;
  background-color: $chips-bg;
  border-radius: $radius;
  white-space: nowrap;
  text-transform: capitalize;
}

.ui-chips.--small {
  background-color: $chips-small-bg;
  color: $chips-small-text;

  @include from-br(sm) {
    padding-block: 4px;
    padding-inline: 8px;
    height: var(--chips-height-small);
  }

  @include hover(background-color) {
    background-color: $chips-small-bg--hover;
  }
}

.ui-chips.--micro {
  @include font-xs;

  padding-block: 4px;
  padding-inline: 10px;
  height: var(--chips-height-micro);
  border-radius: $radius-6;
  background-color: $chips-micro-bg;
  color: $chips-micro-text;

  @include hover(background-color, color) {
    background-color: $chips-micro-bg--hover;
    color: $chips-micro-text--hover;
  }
}

.ui-chips.--not-capitalize {
  text-transform: none;
}

.ui-chips.router-link-exact-active,
.ui-chips.--active {
  background-color: $chips-bg--active;
  color: $chips-text--active;
}

.ui-chips.--alphabet {
  --size: 36px;

  display: grid;
  width: var(--size);
  height: var(--size);
  align-items: center;
  place-content: center;
  aspect-ratio: 1/1;
  background-color: $chips-bg-alphabet;

  @include hover(background-color) {
    background-color: $chips-bg-alphabet--hover;
  }

  @include from-br(sm) {
    --size: 32px;
  }

  @include to-br(sm) {
    max-height: 100%;
  }
}

.ui-chips.--all {
  display: flex;
  width: auto;
  height: var(--chips-height);
  aspect-ratio: auto;
}

.ui-chips.--active.--alphabet {
  background-color: $chips-alphabet-bg--active--hover;
}

.ui-chips:not(.--active, .router-link-exact-active, .--alphabet, .--small) {
  @include hover(background-color, color) {
    background-color: $chips-bg--hover;
    color: $chips-text--hover;
  }
}

.ui-chips__img {
  flex-shrink: 0;
}

.ui-chips__img.--cover {
  width: var(--chips-height);
  height: var(--chips-height);
  object-fit: cover;
  object-position: center 70%;
  border-radius: 0 $radius-small $radius-small 0;
}

.ui-chips__img.--contain {
  width: 22px;
  height: 16px;
  object-fit: contain;
}

.ui-chips.--image-cover {
  padding-left: 0;
  overflow: hidden;
}
</style>
