<template>
  <div
    class="whitespace-nowrap overflow-auto"
    :class="props.wrapper === 'row'? 'flex':'flex flex-col'"
  >
    <button
      v-for="(option) in options"
      :key="option.key"
      :disabled="option.disabled"
      :class="activeTab === option.key ? selectedClasses() : defaultClasses()"
      @click="() => handleClick(option)"
    >
      <slot
        name="option"
        :option="option"
      >
        <span
          class="flex gap-1 "
          :class="[align === 'left' ? 'justify-between' : 'justify-center' ]"
        >
          <span>
            {{ option.name }}
          </span>
          <a-digit-badge
            v-if="option.count!== undefined"
            size="md"
            class="font-normal justify-self-start"
          >
            {{ option.count }}
          </a-digit-badge>
          <a-icon-warning-circle
            v-if="option.warning"
            class="text-black justify-self-end"
          />
        </span>
      </slot>
    </button>
  </div>
</template>

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

defineOptions({name: 'ALineTabs'})

interface Props {
  options: Tab[]
  view: 'bottom' | 'right' | "left"
  size?: 'lg' | 'sm'
  align: 'left' | 'center'
  block?: boolean
  wrapper?: 'row' | 'column'
}

const props = withDefaults(defineProps<Props>(), {
  view: 'bottom',
  size: 'sm',
  align: 'center',
  block: false,
  wrapper: 'row',
})
const emit = defineEmits(['selectOption']);
const activeTab = defineModel<any>({
  default: 1
})


const viewTypeValues: ViewType = {
  bottom: {
    default: 'border-b-2 border-white dark:border-gray-900 pt-[3px] ',
    selected: 'border-b-2 border-blue-700 dark:border-blue-500 pt-[3px]'
  },
  right: {
    default: 'text-deepblue-900 bg-transparent',
    selected: 'border-r-2 border-deepblue-900'
  },
  left: {
    default: 'text-deepblue-900 bg-transparent',
    selected: 'border-l-2 border-deepblue-900'
  },
};




const defaultClasses = () =>
  [
    'disabled:cursor-not-allowed disabled:text-gray-500 hover:bg-deepblue-900 disabled:dark:text-gray-300 body-s-400 cursor-pointer text-deepblue-900 dark:text-gray-200 bg-transparent select-none hover:bg-opacity-5 hover:disabled:bg-transparent focus-visible:shadow-[0_0_0_4px#1B64B3]',
    viewTypeValues[props.view]['default'],
    props.size == 'sm'?  'px-4 py-[7.5px]' : 'px-4 py-[11.5px]',
    props.block ? 'w-full' : '',
  ]

const selectedClasses = () =>
  [
    'body-s-400 cursor-pointer transition duration-200 select-none font-semibold focus-visible:shadow-[0_0_0_4px#1B64B3]',
    viewTypeValues[props.view]['selected'],
    props.size == 'sm'?  'px-4 py-[7.5px]' : 'px-4 py-[11.5px]',
    props.block ? 'w-full' : '',
  ]

const handleClick = (option:Tab) => {
  activeTab.value = option.key
  emit('selectOption', option);
}

</script>

<style>
/* Add any additional styles here */
</style>
