<template>
  <div class="tabs-block">
    <div class="tabs-block__nav">
      <div class="tabs-block__tabs">
        <button
          v-for="tab in tabs"
          :key="tab.name"
          type="button"
          class="tabs-block__tab"
          :class="{ 'tabs-block__tab--active': activeTab === tab.name }"
          @click="onChange(tab.name)"
        >
          <span class="tabs-block__tab-card">
            <SvgIcon v-if="tab.icon" :name="tab.icon" :size="18" color="#bcbcbc" />
            <span class="tabs-block__tab-label">{{ tab.label }}</span>
          </span>
        </button>
      </div>

      <template v-for="tab in tabs">
        <div
          v-if="tab.hasButton"
          :key="`btn-${tab.name}`"
          class="tabs-block__action tabs-block__action--desktop"
        >
          <BaseButton
            v-if="tab.hasButton && activeTab === tab.name"
            :text="tab.textButton"
            custom-class="tabs-block__action-btn"
            @click="onActionClick(tab)"
          >
            <template #appendIcon>
              <SvgIcon name="arrow-left" :size="16" color="#fff" />
            </template>
          </BaseButton>
        </div>
      </template>
    </div>

    <template v-for="tab in tabs">
      <div
        v-if="tab.hasButton"
        :key="`mbtn-${tab.name}`"
        class="tabs-block__action tabs-block__action--mobile"
      >
        <BaseButton
          v-if="tab.hasButton && activeTab === tab.name"
          :text="tab.textButton"
          custom-class="tabs-block__action-btn"
          @click="onActionClick(tab)"
        >
          <template #appendIcon>
            <SvgIcon name="arrow-left" :size="16" color="#fff" />
          </template>
        </BaseButton>
      </div>
    </template>

    <div class="tabs-block__content">
      <slot :name="activeTab" />
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import BaseButton from '@/components/BaseButton.vue'
import SvgIcon from '@/components/icons/SvgIcon.vue'

const props = defineProps({
  tabs: { type: Array, required: true },
  defaultTab: { type: String, default: '' },
  modelValue: { type: String, default: '' },
})

const emit = defineEmits(['update:modelValue', 'change-tab'])

const activeTab = ref(props.modelValue || props.defaultTab || props.tabs[0]?.name || '')

watch(
  () => props.modelValue,
  (val) => {
    if (val) activeTab.value = val
  }
)

const onChange = (name) => {
  activeTab.value = name
  emit('update:modelValue', name)
  emit('change-tab', name)
}

const onActionClick = (tab) => {
  tab.buttonAction?.(tab)
  emit('button-click', tab)
}
</script>

<style lang="scss" scoped>
.tabs-block {
  &__nav {
    display: flex;
    gap: 0.625rem;
    margin-bottom: 1rem;
  }

  &__tabs {
    flex: 1;
    display: flex;
    gap: 0.625rem;
  }

  &__tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.15s ease;
    opacity: 0.6;

    &--active {
      opacity: 1;
    }
  }

  &__tab-card {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(255, 255, 255, 80%);
    box-shadow: 0 10px 15px -3px rgba(241, 241, 241, 100%);
    padding: 0.775rem;
    border-radius: 0.75rem;
  }

  &__tab-label {
    font-family: var(--font-family-fa);
    font-weight: 500;
    font-size: 0.875rem;
    color: #4b4b4b;
  }

  &__action {
    display: flex;
    align-items: stretch;

    &--desktop {
      display: none;
      min-width: fit-content;

      // margin-block-end: 0.625rem;

      @media (min-width: 768px) {
        display: flex;
      }
    }

    &--mobile {
      display: flex;
      margin-block-end: 0.625rem;

      @media (min-width: 768px) {
        display: none;
      }
    }
  }

  &__action-btn {
    height: 100%;
    min-width: fit-content;
  }

  &__content {
    padding-block: 0.5rem;
  }
}
</style>
