<template>
  <div class="vc-icon-picker">
    <VcInput
      v-model="searchQuery"
      :placeholder="inputPlaceholderText"
      class="vc-icon-picker--input"
    />
    <div
      class="vc-icon-picker-wrapper"
      data-test="icon-picker"
    >
      <div
        v-for="(option, index) in iconList"
        :key="optionKey(option, index, config)"
        :class="{ 'vc-icon-picker-item--active': optionKey(option, index, config) === activeIcon }"
        class="vc-icon-picker-item"
        :data-test="dataTestName"
        :title="optionIcon(option, config)"
        @click="onClick(option, optionKey(option, index, config))"
      >
        <i
          :class="[optionIcon(option, config), setColorClass()]"
          class="icon-2xl"
          :style="hexColor"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import VcInput from '@/components/VcInput/VcInput.vue'
import iconPicker from './iconPicker.mixin'
import { OptionType, ColorType } from './VcIconPicker.types'
import { KeyAttributeType } from '@/types/VueGeneric.types'
import debounce from 'lodash/debounce'

export default defineComponent({
  name: 'VcIconPicker',
  components: {
    VcInput
  },
  mixins: [iconPicker],
  props: {
    modelValue: {
      type: [String],
      default: ''
    },
    inputPlaceholder: {
      type: String,
      default: ''
    },
    dataTestName: {
      type: String,
      default: 'vc-icon-picker'
    },
    color: {
      type: Object as PropType<ColorType>,
      default: () => ({})
    }
  },
  emits: ['input', 'update:modelValue'],
  data () {
    return {
      searchQuery: '' as string,
      activeIcon: '' as KeyAttributeType | unknown | undefined,
      iconList: [] as OptionType[]
    }
  },
  computed: {
    hexColor () {
      return 'hex' in this.color && this.color?.hex ? `color: ${this.color.hex}` : ''
    },
    inputPlaceholderText () {
      return this.inputPlaceholder ? this.inputPlaceholder : this.$tVU.t('icon.picker.search.icon')
    }
  },
  watch: {
    modelValue (val) {
      this.activeIcon = val
    },
    searchQuery () {
      const searchIcon = debounce(this.searchIcon, 200)
      searchIcon()
    }
  },
  mounted () {
    this.activeIcon = this.modelValue
    this.iconList = this.options
  },
  methods: {
    onClick (option: OptionType, item: KeyAttributeType): void {
      this.activeIcon = item
      this.$emit('input', option)
      this.$emit('update:modelValue', item)
    },
    searchIcon (): void {
      if (!this.searchQuery) {
        this.iconList = this.options
      } else {
        this.iconList = this.options.filter((el: OptionType) => {
          const element = el as string
          const optionSearchVal: number = this.optionSearch(el, this.config) as number
          const optionValBySearchKey: string = element[(optionSearchVal as number)] as string

          return optionValBySearchKey.toLowerCase().indexOf(this.searchQuery.toLowerCase()) !== -1
        })
      }
    },
    setColorClass () {
      if ('className' in this.color && this.color?.className) {
        return this.color.className
      }
      if (!this.color?.hex) {
        return 'text-active-elements'
      }
    }
  }
})
</script>

<style lang="scss" scoped>
.vc-icon-picker {
  &--input {
    @apply ml-1;
  }
  &-wrapper {
    @apply flex flex-wrap;
  }
  &-item {
    &:hover {
      @apply border border-active-elements rounded-sm transition duration-500 ease-in-out;
    }
    @apply m-1 w-12 h-12 cursor-pointer border rounded flex items-center justify-center;
    &--active {
      @apply border border-active-elements rounded-sm transition duration-500 ease-in-out;
    }
  }
}
</style>
