import {
  Meta,
  Preview,
  Story,
  ArgsTable,
  IconGallery,
  IconItem
} from '@storybook/addon-docs/blocks';

import '../../src/icons/index.scss';

export const iconsList = [
  'q-icon-bell',
  'q-icon-bell-ring',
  'q-icon-triangle-down',
  'q-icon-triangle-up',
  'q-icon-triangle-left',
  'q-icon-triangle-right',
  'q-icon-double-triangle-left',
  'q-icon-double-triangle-right',
  'q-icon-account',
  'q-icon-account-settings',
  'q-icon-account-couple-fill',
  'q-icon-settings-vertical',
  'q-icon-arrow-down',
  'q-icon-arrow-up',
  'q-icon-arrow-right',
  'q-icon-arrow-left',
  'q-icon-attention-mark',
  'q-icon-alert-stroke',
  'q-icon-alert-fill',
  'q-icon-info',
  'q-icon-question-mark',
  'q-icon-question',
  'q-icon-rubles-circle',
  'q-icon-proceed-1',
  'q-icon-proceed-2',
  'q-icon-close',
  'q-icon-check',
  'q-icon-minus',
  'q-icon-pause',
  'q-icon-reverse',
  'q-icon-plus',
  'q-icon-router',
  'q-icon-router-arrow-down',
  'q-icon-calendar',
  'q-icon-calendar-refresh',
  'q-icon-pic',
  'q-icon-checkbox-square-multiply-non',
  'q-icon-file',
  'q-icon-menu',
  'q-icon-stop-1',
  'q-icon-stop-2',
  'q-icon-view-list',
  'q-icon-graph-gisto',
  'q-icon-eye',
  'q-icon-eye-close',
  'q-icon-search',
  'q-icon-trash-bin',
  'q-icon-envelope-edit',
  'q-icon-cloud-upload',
  'q-icon-diagram-round',
  'q-icon-wallet',
  'q-icon-lock-fill',
  'q-icon-target',
  'q-icon-database-arrow-down',
  'q-icon-dots-3-horizontal',
  'q-icon-wifi',
  'q-icon-logout',
  'q-icon-lock',
  'q-icon-comment',
  'q-icon-credit-card',
  'q-icon-login',
  'q-icon-piggy-bank-fill',
  'q-icon-rubles',
  'q-icon-multiply-fill',
  'q-icon-account-group',
  'q-icon-menu-2-fill',
  'q-icon-eye-fill',
  'q-icon-cog-stroke',
  'q-icon-pencil-square-stroke',
  'q-icon-play',
  'q-icon-finish-fill',
  'q-icon-archive-arrow-down',
  'q-icon-wallet-stroke',
  'q-icon-change-list',
  'q-icon-withdraw-fill',
  'q-icon-info-stroke',
  'q-icon-trash-bin-stroke',
  'q-icon-star',
  'q-icon-save',
  'q-icon-percent',
  'q-icon-drag-vertical-fill',
  'q-icon-diagram-round-stroke',
  'q-icon-attach-fill',
  'q-icon-account-check-fill',
  'q-icon-calendar-clock',
  'q-icon-chain',
  'q-icon-clock-stroke',
  'q-icon-cog-fill',
  'q-icon-earth',
  'q-icon-filter-fill',
  'q-icon-filter-stroke',
  'q-icon-pencil-list',
  'q-icon-settings-horizontal',
  'q-icon-star-fill',
  'q-icon-account-group-web',
  'q-icon-drag-linear',
  'q-icon-y-1',
  'q-icon-y-2',
  'q-icon-y-3',
  'q-icon-y-4',
  'q-icon-key',
  'q-icon-cart',
  'q-icon-house-stroke',
  'q-icon-info-fill',
  'q-icon-phone-settings-stroke'
];

<Meta
  title="Core/Icons"
  argTypes={{
    icon: {
      control: { type: 'select', options: iconsList }
    },
    size: {
      control: { type: 'range', min: 8, max: 320 }
    },
    color: {
      control: { type: 'color' }
    }
  }}
/>

# Icon

Use a class to apply an icon to an element

<IconGallery>
  {iconsList.map((iconName, index) => (
    <IconItem key={iconName} name={iconName}>
      <span
        class={iconName}
        style={{ fontSize: '32px', color: 'var(--color-primary-black)' }}
      />
    </IconItem>
  ))}
</IconGallery>

## Playground

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  template: `
    <span
      :class="icon"
      :style="{
        fontSize: size + 'px',
        color: color,
      }"
    />
  `
});

<Preview>
  <Story
    name="Playground"
    args={{
      icon: 'q-icon-bell',
      size: '56',
      color: '#1d1c1a'
    }}
  >
    {Template.bind({})}
  </Story>
</Preview>

<ArgsTable story="Playground" />