<script lang="tsx">
import { computed, defineComponent, type PropType } from 'vue'
import { useRouter, type RouteLocationRaw } from 'vue-router'
import { type Tab } from './models'

/**
 * Компонент табов
 */
export default defineComponent({
  props: {
    /**
     * Массив табов
     */
    tabs: {
      type: Array as PropType<Tab[]>,
      required: true,
    },
    /**
     * Размер табов
     */
    size: {
      type: String as PropType<'S' | 'M'>,
      default: 'M',
    },
    /**
     * ID активного таба
     */
    activeTab: {
      type: [String, Number],
      required: false,
      default: null,
    },
  },

  emits: [
    /**
     * Событие обновления значения активного таба
     */
    'update:activeTab',
  ],

  setup(props, { emit }) {
    const router = useRouter()

    const activeTab = computed({
      get() {
        return props.activeTab ?? props.tabs[0].id
      },
      set(value) {
        emit('update:activeTab', value)
      },
    })

    const setActiveTab = (tabId: string | number, to?: RouteLocationRaw) => {
      if (to) {
        router.push(to)
      } else {
        activeTab.value = tabId
      }
    }

    return () => (
      <div class='ark-tabs'>
        {props.tabs.map((tab) => (
          <button
            key={tab.id}
            class={[
              'ark-tabs__item',
              `ark-tabs__item--${props.size.toLowerCase()}`,
              {
                'ark-tabs__item--active': activeTab.value === tab.id,
                'ark-tabs__item--disabled': tab.disabled ?? false,
              },
            ]}
            onClick={() => setActiveTab(tab.id, tab.to)}
          >
            {tab.label}
          </button>
        ))}
      </div>
    )
  },
})
</script>

<style lang="scss">
    .ark-tabs {
        display: flex;
        align-items: center;
        border-radius: 4px;
        background: $white;
        border: 1px solid $gray-300;
        width: max-content;
        column-gap: 2px;
        height: fit-content;

        &__item {
          font-family: Roboto;
          font-weight: 500;
          line-height: 16px;
          cursor: pointer;
          color: $gray-500;
          border: none;
          background: transparent;
          border: 1px solid transparent;
          border-radius: 4px;
          transition: border-color .2s, color .2s, background-color .2s;
          margin: -1px;

          &:hover {
            background-color: $gray-200;
          }

          &--s {
            padding: 7px 12px;
            font-size: 12px;
          }

          &--m {
            padding: 12px 24px;
            font-size: 14px;
          }

          &--active {
            color: $cyan-500;
            border-color: $cyan-500;
            cursor: default;
          }

          &--disabled {
            background-color: transparent;
            color: $gray-300;
            cursor: default;
            pointer-events: none;
          }
        }
    }
</style>
