<template>
  <div
    ref="tabs"
    class="scroll-container overflow-auto whitespace-nowrap"
    :class="props.wrapper === 'row' ? 'flex gap-1' : 'flex flex-col gap-1'"
  >
    <button
      v-for="option in options"
      :key="option.key"
      :disabled="option.disabled || disabled"
      :data-active="activeTab === option.key"
      :class="[
        activeTab === option.key ? selectedClasses() : defaultClasses(!!option.disabled),
        sizeOptions[size]
      ]"
      @click="onChanged(option, $event)"
    >
      <slot name="option" :option="option">
        <span
          class="flex items-center gap-1 whitespace-nowrap"
          :class="[align === 'left' ? 'justify-start' : 'justify-center']"
        >
          <span>
            {{ t(option.name) }}
          </span>
          <template v-if="option.count !== undefined">
            <a-digit-badge
              v-if="props.countView === 'badge'"
              :value="option.count"
              :type="option.badgeColor ? option.badgeColor : 'primary'"
              :disabled="(option.disabled || option.count === 0) && activeTab !== option.key"
              :view="activeTab === option.key ? 'inverted' : 'default'"
              :size="badgeSize"
            />
            <span v-else-if="props.countView === 'brackets'"> ({{ option.count }}) </span>
          </template>
        </span>
      </slot>
    </button>
  </div>
</template>

<script setup lang="ts">
import type { Tab, ViewType } from './types'

defineOptions({ name: 'APillTabs' })
const emit = defineEmits(['selectOption', 'prevent'])

interface Props {
  options: Tab[]
  view?: 'transparent' | 'main' | 'gray' | 'blue' | 'mobile'
  size?: 'lg' | 'sm' | 'xs'
  badgeSize?: 'sm' | 'md' | 'lg'
  align?: 'left' | 'center'
  block?: boolean
  wrapper?: 'column' | 'row'
  countView?: 'badge' | 'brackets'
  disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  view: 'main',
  size: 'sm',
  align: 'center',
  badgeSize: 'lg',
  block: false,
  wrapper: 'row',
  countView: 'badge'
})
const tabs = ref<HTMLDivElement | null>(null)
const activeTab = defineModel<any>({ default: 1 })
const { t } = useI18n()

const viewTypeValues: ViewType = {
  main: {
    default:
      'text-deepblue-900 bg-deepblue-900/5 hover:bg-deepblue-900/10 dark:bg-gray-200/5 dark:text-gray-200 dark:hover:bg-gray-800 ',
    selected: 'bg-blue-700 font-semibold text-white dark:text-gray-900 dark:bg-blue-500'
  },
  transparent: {
    default: 'text-deepblue-900 bg-transparent hover:bg-deepblue-100',
    selected: 'font-semibold bg-white text-deepblue-900 '
  },
  gray: {
    default:
      'bg-deepblue-900/5 hover:bg-deepblue-900/20 dark:bg-gray-50/10 dark:hover:bg-gray-50/20 dark:text-gray-50',
    selected: 'text-white bg-deepblue-900 dark:bg-gray-50 dark:text-gray-900'
  },
  blue: {
    default:
      'text-deepblue-900 bg-white font-semibold leading-5 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800 hover:bg-deepblue-100 ',
    selected: 'bg-blue-700 font-semibold leading-5 text-white dark:text-gray-900 dark:bg-blue-500'
  },
  mobile: {
    default:
      'bg-white dark:text-gray-200 font-semibold dark:bg-gray-900  dark:hover:bg-gray-500 hover:bg-deepblue-100 ',
    selected: 'text-white dark:text-gray-900 font-semibold dark:bg-white  bg-deepblue-900'
  }
}

const defaultClasses = (isDisabled: boolean) => [
  'text-sm rounded-md outline-none select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
  isDisabled ? 'bg-deepblue-900/5 dark:bg-gray-200/5 text-gray-500 dark:text-gray-500' : '',
  props.view === 'transparent' && isDisabled ? 'bg-transparent' : '',
  viewTypeValues[props.view]['default'],
  props.block ? 'w-full' : ''
]
const selectedClasses = () => [
  'text-sm rounded-md select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
  viewTypeValues[props.view]['selected'],
  props.block ? 'w-full' : ''
]

const sizeOptions = {
  lg: 'px-4 py-2.5',
  sm: 'px-4 py-[7.5px]',
  ss: 'px-3 py-1.5',
  xs: 'px-3 py-[4px]'
}

const onChanged = (option: Tab, event) => {
  if (option.prevent) {
    emit('prevent', option)
    return
  }
  activeTab.value = option.key
  emit('selectOption', option)
  event.preventDefault()
  event.currentTarget.scrollIntoView({
    behavior: 'smooth',
    inline: 'start',
    block: 'nearest'
  })
}

onMounted(() => {
  const isDesktop = window.matchMedia('(min-width: 1024px)').matches

  if (tabs.value && !isDesktop) {
    const activeTab = tabs.value.querySelector('[data-active="true"]')

    if (activeTab) {
      activeTab.scrollIntoView({
        inline: 'start',
        block: 'nearest',
      })
    }
  }
})
</script>

<style scoped>
/* Add any additional styles here */
.scroll-container::-webkit-scrollbar {
  display: none; /* для браузеров на основе WebKit */
}
</style>
