<template>
  <div class="badge-select">
    <label v-if="label" class="badge-select__label">{{ label }}</label>
    <div class="badge-select__chips" :class="`badge-select__chips--${size}`">
      <button
        v-for="option in options"
        :key="option[optionValue]"
        type="button"
        class="badge-select__chip"
        :class="[
          `badge-select__chip--${variant}`,
          { 'badge-select__chip--selected': modelValue === option[optionValue] },
        ]"
        :disabled="disabled"
        @click="select(option)"
      >
        {{ option[optionLabel] }}
      </button>
    </div>
    <div v-if="error" class="badge-select__error">{{ error }}</div>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: { type: [String, Number], default: null },
  label: { type: String, default: '' },
  options: { type: Array, default: () => [] },
  optionLabel: { type: String, default: 'label' },
  optionValue: { type: String, default: 'value' },
  variant: { type: String, default: 'neutral' },
  size: { type: String, default: 'md' },
  disabled: { type: Boolean, default: false },
  error: { type: String, default: '' },
})

const emit = defineEmits(['update:modelValue', 'change'])

const select = (option) => {
  if (props.disabled) return
  const value = option[props.optionValue]
  emit('update:modelValue', value)
  emit('change', value)
}
</script>

<style lang="scss" scoped>
.badge-select {
  width: 100%;
  margin-bottom: 0.75rem;

  &__label {
    display: flex;
    margin-bottom: 0.375rem;
    font-family: var(--font-family-fa);
    font-weight: 300;
    line-height: 1.5rem;
    font-size: 0.875rem;
    color: var(--color-prim-gray);
  }

  &__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  &__chip {
    border: 1px solid #e8e8e8;
    border-radius: 9999px;
    background: transparent;
    font-family: var(--font-family-fa);
    color: #b5b5b5;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;

    &:hover:enabled {
      color: #7a7a7a;
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    &--selected {
      background: #fff;
      border-color: #f0f0f0;
      box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 6%);
      color: #4b4b4b;
      font-weight: 500;
    }

    &--primary#{&}--selected {
      color: var(--color-primary);
      border-color: var(--color-primary);
    }
  }

  &__chips--sm .badge-select__chip {
    padding: 0.25rem 0.875rem;
    font-size: 0.7rem;
  }

  &__chips--md .badge-select__chip {
    padding: 0.375rem 1.125rem;
    font-size: 0.8rem;
  }

  &__chips--lg .badge-select__chip {
    padding: 0.5rem 1.375rem;
    font-size: 0.875rem;
  }

  &__error {
    margin-top: 0.25rem;
    font-family: var(--font-family-fa);
    font-size: 0.75rem;
    color: var(--color-error);
  }
}
</style>
