import { Meta, Canvas, Story } from '@storybook/addon-docs'
import sbTokenTable from './../../../stories/components/token-table.vue'
import sbTokenTableRow from './../../../stories/components/token-row.vue'
import sbTokenTableCol from './../../../stories/components/token-col.vue'
import sbTokenTableSwatch from './../../../stories/components/token-swatch.vue'
import { RplCoreIconNames, RplCustomIconNames, RplIconGroups, RplIconSizes } from './constants'
import { RplColorThemes } from './../../lib/constants'
import RplIcon from './RplIcon.vue'

export const IconListTemplate = (args) => ({
  components: { sbTokenTable, sbTokenTableRow, sbTokenTableCol, sbTokenTableSwatch, RplIcon },
  setup() {
    return {
      args
    }
  },
  template: `
    <sbTokenTable :columns="args.columns" >
      <sbTokenTableRow v-for="item in args.items" :key="item">
        <sbTokenTableCol>{{item}}</sbTokenTableCol>
        <sbTokenTableCol><RplIcon :name="item" :colour="args.colour" :size="args.size" /></sbTokenTableCol>
      </sbTokenTableRow>
    </sbTokenTable>
  `
});

export const IconSpriteSheetOnDemandTemplate = (args) => ({
  components: { sbTokenTable, sbTokenTableRow, sbTokenTableCol, sbTokenTableSwatch, RplIcon },
  setup() {
    return {
      args
    }
  },
  template: `
    <sbTokenTable :columns="args.columns" >
      <sbTokenTableRow v-for="item in args.items" :key="item">
        <sbTokenTableCol>{{item}}</sbTokenTableCol>
        <sbTokenTableCol><RplIcon :name="item" :colour="args.colour" :size="args.size" /></sbTokenTableCol>
      </sbTokenTableRow>
    </sbTokenTable>
  `
});

<Meta
  title='Base Styles/Icons'
  parameters={{viewMode: 'docs'}}
  argTypes={{
    colour: {
      control: { type: 'select' },
      options: RplColorThemes
    },
    size: {
      control: { type: 'select' },
      options: RplIconSizes
    },
    items: {
      table: {
        disable: true
      }
    },
    columns: {
      table: {
        disable: true
      }
    }
  }}
  args={{
    colour: 'default',
    size: 'm'
  }}
/>

# Icon list
<Canvas>
  <Story
    name="Alert"
    args={{
      columns: ['Alert'],
      items: RplIconGroups.alert
    }}
  >
    {IconListTemplate.bind({})}
  </Story>
  <Story
    name="Social"
    args={{
      columns: ['Social'],
      items: RplIconGroups.social
    }}
  >
    {IconListTemplate.bind({})}
  </Story>
  <Story
    name="Standard"
    args={{
      columns: ['Standard'],
      items: RplIconGroups.standard
    }}
  >
    {IconListTemplate.bind({})}
  </Story>
</Canvas>


# Icon sprite sheet / on demand list
<Canvas>
  <Story
    name="Icons in sprite sheet"
    args={{
      columns: ['Sprite sheet'],
      items: RplCoreIconNames
    }}
  >
    {IconSpriteSheetOnDemandTemplate.bind({})}
  </Story>
  <Story
    name="Icons on demand"
    args={{
      columns: ['On Demand'],
      items: RplCustomIconNames
    }}
  >
    {IconSpriteSheetOnDemandTemplate.bind({})}
  </Story>
</Canvas>
