<template>
  <div>
    <span
      class="vc-view-switcher"
      :class="{ 'vc-view-switcher--disabled': disabled }"
      :data-test-name="dataTestName"
    >
      <span
        v-for="(option, index) in options"
        :key="optionKey(option, index, config)"
        class="vc-view-switcher-container"
        tabindex="-1"
      >
        <span
          class="vc-view-switcher-item"
          :class="[
            { 'vc-view-switcher-item--active': optionKey(option, index, config) === activeElement },
            { 'vc-view-switcher-item--disabled': optionDisabled(option, {disabledKey: 'disabled'}) }
          ]"
          :tabindex="optionDisabled(option, {disabledKey: 'disabled'}) ? -1 : 0"
          @keyup.enter="onClick(option, optionKey(option, index, config))"
          @click="onClick(option, optionKey(option, index, config))"
        >
          <i
            :class="optionIcon(option, config)"
            class="vc-view-switcher-item--icon text-icons"
          />
          <span
            class="vc-view-switcher-item--text"
          >
            {{ optionLabel(option, config) }}
          </span>
        </span>
        <span class="vc-view-switcher-item--vertical-line" />
      </span>
    </span>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import optionMethods from '@/mixins/optionMethods.mixin'
import { OptionType } from '@/types/OptionAndConfig.types'
import { KeyAttributeType } from '@/types/VueGeneric.types'

export default defineComponent({
  name: 'VcViewSwitcher',
  mixins: [optionMethods],
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    dataTestName: {
      type: String,
      default: 'default'
    },
    modelValue: {
      type: [Number, String],
      default: ''
    }
  },
  emits: ['change', 'update:modelValue'],
  data () {
    return {
      activeElement: '' as KeyAttributeType | unknown | undefined
    }
  },
  watch: {
    modelValue (val) {
      this.activeElement = val
    }
  },
  mounted () {
    this.activeElement = this.modelValue
  },
  methods: {
    onClick (option: OptionType, item: KeyAttributeType): void {
      this.activeElement = item
      this.$emit('change', option)
      this.$emit('update:modelValue', item)
    }
  }
})
</script>

<style lang="scss" scoped>
.vc-view-switcher {
  @apply p-1 bg-secondary-actions-bg--focus rounded border border-secondary-actions outline-none h-8 inline-flex items-center;
  &--disabled {
    @apply cursor-not-allowed opacity-50 pointer-events-none select-none;
  }
  &--disabled &-item {
    @apply cursor-not-allowed select-none;
  }
  &-item {
    @apply px-3 h-6 cursor-pointer inline-flex relative items-center;
    &--icon {
      @apply mr-1;
    }
    [dir='rtl'] &--icon {
      @apply mr-0 ml-1;
    }
    &--text {
      @apply text-sm font-medium text-default-text;
    }
    &--active {
      @apply rounded bg-white shadow-view-switcher;
    }
    &--vertical-line {
      @apply border-r border-secondary-actions inline-block mx-0.125 h-8;
    }
    &:not(.vc-view-switcher-item--active):hover {
      @apply bg-active-elements-bg--focus rounded shadow-view-switcher transition duration-300 ease-in-out;
    }
  }
  &-item:not(.vc-view-switcher-item--active):focus-visible {
    @apply bg-active-elements-bg--focus rounded shadow-view-switcher transition duration-300 ease-in-out;
  }
  &-item {
    @apply outline-none;
  }
  &:not(.vc-view-switcher--disabled) &-item--disabled {
    @apply cursor-not-allowed opacity-50 pointer-events-none;
  }
  &-container:last-child &-item--vertical-line {
    @apply hidden;
  }
  &-container {
    @apply inline-flex items-center;
  }
}
</style>
