<template>
  <div
    class="vc-dropdown-option"
    :class="{
      'vc-dropdown-option--disabled': disabled,
      'vc-dropdown-option--active': active
    }"
    :disabled="disabled"
    :data-test-name="dataTestName"
    @click.stop="onClick"
  >
    <template
      v-if="$slots.default"
    >
      <slot :value="value" />
    </template>
    <template
      v-else
    >
      <span class="vc-dropdown-option-content--default">
        <i
          v-if="icon"
          class="vc-dropdown-option-icon"
          :class="icon"
          :style="setStyles"
        />
        <span class="vc-dropdown-option-label">{{ label }}</span>
      </span>
      <template v-if="$slots['content-suffix']">
        <slot name="content-suffix" />
      </template>
    </template>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { OptionValueType } from '@/types/OptionAndConfig.types'

const LABEL_DEFAULT = 'No label provided'
const DATA_TEST_NAME_DEFAULT = `dropdown-option-${Date.now()}`

export default defineComponent({
  name: 'VcDropdownOption',
  props: {
    label: {
      type: [String, Number],
      default: LABEL_DEFAULT
    },
    icon: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    dataTestName: {
      type: String,
      default: DATA_TEST_NAME_DEFAULT
    },
    value: {
      type: [String, Number] as PropType<OptionValueType>,
      required: true
    },
    active: {
      type: Boolean,
      default: false
    },
    iconColorHex: {
      type: String,
      default: ''
    }
  },
  emits: ['click'],
  computed: {
    setStyles () {
      return {
        color: this.iconColorHex
      }
    }
  },
  methods: {
    onClick () {
      if (this.disabled) {
        return
      }

      this.$emit('click', this.value)
    }
  }
})
</script>

<style lang="scss" scoped>
@import "VcDropdownOption";
</style>
