import { ref } from 'vue'
import { ActionBar } from '.'
import '../selects/story.scss'

const showFirework = ref(false)

async function startFirework() {
  await new Promise((resolve) => {
    showFirework.value = true
    setTimeout(() => {
      showFirework.value = false
      resolve(true)
    }, (1700 * 3))
  })
}

export default {
  title: 'The Design system/Action bar',
  component: ActionBar,
  tags: ['autodocs'],
  args: {
    text: 'Счетчик',
    callbackValue: [
      {
        id: 1,
      },
      {
        id: 2,
      },
      {
        id: 3,
      },
    ],
    actions: [
      {
        icon: 'detach',
        tooltip: 'Отвязать',
        elementCount: 3,
        callback: startFirework,
      },
      {
        icon: 'attach',
        tooltip: 'Привязать',
        elementCount: 'one',
        callback: startFirework,
      },
      {
        icon: 'login-ad',
        tooltip: 'Учетная запись в AD',
        elementCount: 'many',
        callback: startFirework,
      },
      {
        icon: 'password-off',
        tooltip: 'Сбросить пароль',
        elementCount: 2,
        callback: startFirework,
      },
      {
        icon: 'check',
        tooltip: 'Активировать',
        callback: startFirework,
      },
      {
        icon: 'check-off',
        tooltip: 'Деактивировать',
        callback: startFirework,
      },
    ],
  },
  argTypes: {
    text: {
      description: 'Текст на панели',
      control: { type: 'radio' },
      options: ['Счетчик', 'Выбрано: 4 из 17'],
      defaultValue: 'Выбрано: 4 из 17',
    },
  },
}

const Template = (args) => ({
  props: Object.keys(args),
  render() {
    return (
      <div class={`box-with-firework ${showFirework.value ? 'firework' : ''}`}>
        <ActionBar {...args } />
      </div>
    )
  },
})

export const Primary = Template.bind({})