import './assets/styles.stories.scss'

import { Transition } from 'vue'
import { type Meta } from '@storybook/vue3'
import SideTabBoard from './SideTabsBoard.vue'
import DefaultButton from '../buttons/DefaultButton.vue'
import type { SideTabsBoardSlotParams } from './models'

export default {
  title: 'The Design system/SideTabBoard',
  component: SideTabBoard,
  tags: ['autodocs'],
} satisfies Meta<typeof SideTabBoard>

const Template = (args: any) => ({
  setup() {
    const attributes: string[] = []
    for (let i = 0; i <= 4; i++) {
      attributes.push(`Атрибут ${i + 1}`)
    }

    return () => (
      <div style={{ minWidth: '720px' }}>
        <SideTabBoard
          topButtons={({
            showContent, isOpen, activeSlotIndex, setTooltip,
          }: SideTabsBoardSlotParams) => attributes.map((value, idx) => (
            <div class={{
              'side-tab-board-button': true,
              'is-active': activeSlotIndex === idx,
              'is-open': isOpen,
            }} onClick={() => showContent(idx)} onMouseover={() => setTooltip(value)}>
              <DefaultButton size='S' icon='copy' type='tertiary' />
              <Transition name='side-tab-board-button-text'>{
                isOpen && <div class='side-tab-board-button-text'>{value}</div>
              }</Transition>
            </div>
          ))}

          bottomButtons={({ isOpen }: SideTabsBoardSlotParams) => [
            <DefaultButton size='S' type='secondary' icon='plus' label={isOpen ? 'К списку торговых точек' : ''} />,
          ]}

          content={() => [
            <div>CONTENT 1</div>,
            <div>CONTENT 2</div>,
            <div>CONTENT 3</div>,
            <div>CONTENT 10</div>,
          ]}
        />
      </div>
    )
  },
})

export const Primary = Template.bind({})