import NoData from './NoData.vue'
import '../../selects/story.scss'

const getRandomLightColor = () => {
  const minBrightness = 200
  const maxBrightness = 255
  const randomChannel = () => Math.floor(Math.random() * (maxBrightness - minBrightness + 1) + minBrightness)
  const r = randomChannel()
  const g = randomChannel()
  const b = randomChannel()
  return `rgb(${r}, ${g}, ${b})`
}

export default {
  title: 'The Design system/Tables/No data',
  component: NoData,
  tags: ['autodocs'],
  args: {
    title: 'Название таблицы',
    text: 'Для отображения данных добавьте атрибут',
    buttonLabel: 'Добавить',
    size: 'S',
    buttonClick: () => {
      const background = getRandomLightColor()
      const elements = document.querySelectorAll('#storybook-root:has(.ark-ui-no-data)')
      elements.forEach((element) => {
        element.style.backgroundColor = background
      })
    },
  },
  argTypes: {
    size: {
      description: 'Размер отображаемой кнопки',
      control: { type: 'radio' },
      options: ['M', 'S'],
    },
    icon: {
      description: 'Изображение',
      control: { type: 'radio' },
      options: ['box', 'search'],
      defaultValue: 'box',
    },
  },
}

const Template = (args) => ({
  props: Object.keys(args),
  render() {
    return (
      <div style="height: 340px;">
        <NoData {...args } />
      </div>
    )
  },
})

export const Primary = Template.bind({})