<script lang="tsx">
import {
  defineComponent,
  nextTick,
  ref, type PropType,
} from 'vue'

import type { SideTabsBoardSlotParams } from './models'
import BlackTooltip from '../tooltips/BlackTooltip.vue'

/**
 * Компонент окна с возможностью переключения контекта
 */
export default defineComponent({
  name: 'SideTabsBoard',

  props: {
    /**
     * Возвращает массив элементов, отображающихся в вехнем боковом меню
     * принимает аргументом параметры:
     * showContent(id: number) переключает отображение контента в правой области
     * isOpen - развернуто или свернуто боковое меню
     * activeSlotIndex - индекс активного слота контента
     */
    topButtons: {
      type: Function as PropType<(params: SideTabsBoardSlotParams) => JSX.Element[]>,
      default: () => [],
    },
    /**
     * Возвращает массив элементов, отображающихся в нижнем боковом меню
     * принимает аргументом параметры:
     * showContent(id: number) переключает отображение контента в правой области
     * isOpen - развернуто или свернуто боковое меню
     * activeSlotIndex - индекс активного слота контента
     */
    bottomButtons: {
      type: Function as PropType<(params: SideTabsBoardSlotParams) => JSX.Element[]>,
      default: () => [],
    },

    /**
     * Возвращает массив элементов, отобращающихся в правой области
     */
    content: {
      type: Function as PropType<(contentHeader?: () => JSX.Element) => JSX.Element[]>,
      default: () => [],
    },
    contentHeader: {
      type: Function as PropType<() => JSX.Element>,
      default: () => ({}),
    },
  },

  setup(props, { expose }) {
    const isOpen = ref(true)
    const activeSlotIndex = ref(0)
    const tooltip = ref('')

    const toggleOpen = () => {
      isOpen.value = !isOpen.value
    }

    const showContent = async (id: number) => {
      activeSlotIndex.value = -1
      await nextTick()
      activeSlotIndex.value = id
    }

    const setTooltip = (value = '') => {
      tooltip.value = value
    }

    const renderButton = (button: JSX.Element) => {
      const element = ref<HTMLElement | null>(null)

      return <BlackTooltip right={true} center={true} forcedDisable={isOpen.value} text={tooltip.value}>
        <div ref={element} class='ark-ui-side-tab-board-side-slot' onMouseleave={() => {
          setTooltip()
        }}>{
          button
        }</div>
      </BlackTooltip>
    }

    expose({ showContent, activeSlotIndex })

    return () => (
      <div class={`ark-ui-side-tab-board ${isOpen.value ? 'is-opened' : 'is-closed'}`}>
        <div class='ark-ui-side-tab-board-side'>
          <BlackTooltip right={true} center={true} forcedDisable={isOpen.value} text='Развернуть'>
            <div class='ark-ui-side-tab-board-toggle-action' onClick={toggleOpen}>
              <div class='ark-ui-side-tab-board-toggle-action-icon' />
              <div class='ark-ui-side-tab-board-toggle-action-text'>Свернуть</div>
            </div>
          </BlackTooltip>

          <div class='ark-ui-side-tab-board-side-content'>
            <div class='ark-ui-side-tab-board-side-top'>{
              props.topButtons({
                showContent,
                isOpen: isOpen.value,
                activeSlotIndex: activeSlotIndex.value,
                setTooltip,
              }).map(renderButton)
            }</div>

            <div class='ark-ui-side-tab-board-side-bottom'>{
              props.bottomButtons({
                showContent,
                isOpen: isOpen.value,
                activeSlotIndex: activeSlotIndex.value,
                setTooltip,
              }).map(renderButton)
            }</div>
          </div>
        </div>

        <div class='ark-ui-side-tab-board-content'>{
          props.content(props.contentHeader)[activeSlotIndex.value]
        }</div>
      </div>
    )
  },
})
</script>

<style lang="scss" scoped>
@import url('./assets/styles.scss');
</style>
