import { Meta, Canvas, Story } from '@storybook/addon-docs'
import { RplPaddingUtilities, RplMarginUtilities, RplSizeUtilities } from './constants'
import sbTokenTable from './components/token-table.vue'
import sbTokenTableRow from './components/token-row.vue'
import sbTokenTableCol from './components/token-col.vue'
import sbTokenTableSwatch from './components/token-swatch.vue'


export const PaddingTemplate = (args) => ({
  components: { sbTokenTable, sbTokenTableRow, sbTokenTableCol, sbTokenTableSwatch },
  setup() {
    return {
      columns: ['Style', 'Class'],
      RplPaddingUtilities,
      getItemStyles: (item) => {
        return `background-color: ${item.color}; display: inline-block;`
      }
    }
  },
  template: `
    <sbTokenTable :columns="columns" full>
      <sbTokenTableRow lined v-for="item in RplPaddingUtilities" :key="item">
        <sbTokenTableCol>
          <div :style="getItemStyles(item)" :className="item.class">
            {{item.title}}
          </div>
        </sbTokenTableCol>
        <sbTokenTableCol>.{{item.class}}</sbTokenTableCol>
      </sbTokenTableRow>
    </sbTokenTable>
  `
});

export const MarginTemplate = (args) => ({
  components: { sbTokenTable, sbTokenTableRow, sbTokenTableCol, sbTokenTableSwatch },
  setup() {
    return {
      columns: ['Style', 'Class'],
      RplMarginUtilities,
      getItemStyles: (item) => {
        return `background-color: ${item.color}; display: inline-block;`
      }
    }
  },
  template: `
    <sbTokenTable :columns="columns" full>
      <sbTokenTableRow lined v-for="item in RplMarginUtilities" :key="item">
        <sbTokenTableCol>
          <div :style="getItemStyles(item)" :className="item.class">
            {{item.title}}
          </div>
        </sbTokenTableCol>
        <sbTokenTableCol>.{{item.class}}</sbTokenTableCol>
      </sbTokenTableRow>
    </sbTokenTable>
  `
});

export const SizeTemplate = (args) => ({
  components: { sbTokenTable, sbTokenTableRow, sbTokenTableCol, sbTokenTableSwatch },
  setup() {
    return {
      columns: ['Style', 'Size', 'Class'],
      RplSizeUtilities,
      getItemStyles: (item) => {
        return `background-color: ${item.color}; display: inline-block;`
      }
    }
  },
  template: `
    <sbTokenTable :columns="columns" full>
      <sbTokenTableRow lined v-for="item in RplSizeUtilities" :key="item">
        <sbTokenTableCol>
          <div :style="getItemStyles(item)" :className="item.class"></div>
        </sbTokenTableCol>
        <sbTokenTableCol>
          {{item.value}}px
        </sbTokenTableCol>
        <sbTokenTableCol>.{{item.class}}</sbTokenTableCol>
      </sbTokenTableRow>
    </sbTokenTable>
  `
});

# Utilities

<Meta title='Base Styles/Utilities/Spacing' parameters={{viewMode: 'docs'}} />

## Margin

<Canvas>
  <Story name="Margin" parameters={{
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/jtsOPNk1k4cWnumzkZgclD/Ripple-2.0-PoC?node-id=1286%3A17240',
    }
  }}>
    {MarginTemplate.bind({})}
  </Story>
</Canvas>

## Padding

<Canvas>
  <Story name="Padding" parameters={{
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/jtsOPNk1k4cWnumzkZgclD/Ripple-2.0-PoC?node-id=1286%3A17240',
    }
  }}>
    {PaddingTemplate.bind({})}
  </Story>
</Canvas>

## Size

<Canvas>
  <Story name="Size" parameters={{
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/jtsOPNk1k4cWnumzkZgclD/Ripple-2.0-PoC?node-id=1286%3A17240',
    }
  }}>
    {SizeTemplate.bind({})}
  </Story>
</Canvas>
