// eslint-disable-next-line import/no-extraneous-dependencies
import {
  withKnobs,
  number,
  color,
} from '@storybook/addon-knobs'

import withTheme from '../../../storybookUtils/decorators/withTheme'

import Icons from '../../../storybookUtils/Icons'

const req = require.context('../../icons', false, /svg$/)

const iconKeys = req.keys()
  .map(req)
  .map(i => `#${i.default.id}`)

export default {
  title: 'SvgSprite',
  decorators: [
    withKnobs,
    withTheme,
  ],
}

export const icons = () => ({
  components: {
    Icons,
  },
  props: {
    size: {
      default: number('width/height (px)', 64, {
        range: true,
        min: 10,
        max: 100,
        step: 1,
      }),
    },
    fill: {
      default: color('fill', '#000'),
    },
    stroke: {
      default: color('stroke', ''),
    },
  },
  data() {
    return {
      icons: iconKeys,
    }
  },
  template: `
    <Icons
      :icons="icons"
      :size="size + 'px'"
      :stroke="stroke"
      :fill="fill"
    />
  `,
})
