import readme from './readme.md'

export default {
  title: 'Button',
  parameters: {
    'in-dsm': {
      id: '5ef110374ab9dbe6b81acff5'
    },
    previewTabs: {
      'storybook/docs/panel': {
        hidden: true,
      },
    },
    notes: { readme },
  },
  argTypes: { 
    text: {
      name: 'Text',
      table: { category: 'Props' },
      control: { type: 'text' }
    },
    size: {
      name: 'Size',
      table: { category: 'Props' },
      defaultValue: 'medium',
      control: { type: 'select', options: ['small', 'medium', 'large'] }
    },
    negative: {
      name: 'Negative',
      table: { category: 'Props' },
      control: { type: 'boolean' }
    },
    loading: {
      name: 'Loading',
      table: { category: 'Props' },
      control: { type: 'boolean' }
    },
    full: {
      name: 'Full',
      table: { category: 'Props' },
      control: { type: 'boolean' }
    },
    disable: {
      name: 'Disable',
      table: { category: 'Props' },
      control: { type: 'boolean' }
    },
    href: {
      name: 'Href',
      table: { category: 'Props' },
      control: { type: 'text' }
    },
    hrefTarget: {
      name: 'Href target',
      table: { category: 'Props' },
      control: { type: 'select', options: ['_self', '_blank', '_parent', '_top'] }
    },
    onclick: {
      table: { category: 'Methods' }
    },
  }
}

export const primary = (args) => (`
  <ibk-button text="${args.text}"
    size="${args.size}"
    loading="${args.loading ?? false}"
    disable="${args.disable ?? false}"
    href="${args.href ?? ''}"
    href-target="${args.hrefTarget}"
    full="${args.full ?? false}"
    negative="${args.negative ?? false}"></ibk-button>
`)

primary.args = {
  text: 'Primary button'
}

export const secondary = (args) => (`
  <ibk-button appearance="secondary"
    text="${args.text}"
    size="${args.size}"
    loading="${args.loading ?? false}"
    disable="${args.disable ?? false}"
    href="${args.href ?? ''}"
    href-target="${args.hrefTarget}"
    full="${args.full ?? false}"
    negative="${args.negative ?? false}"></ibk-button>
`)

secondary.args = {
  text: 'Secondary button'
}

export const tertiary = (args) => (`
  <ibk-button appearance="tertiary"
    text="${args.text}"
    size="${args.size}"
    loading="${args.loading ?? false}"
    disable="${args.disable ?? false}"
    href="${args.href ?? ''}"
    href-target="${args.hrefTarget}"
    full="${args.full ?? false}"
    negative="${args.negative ?? false}"></ibk-button>
`)

tertiary.args = {
  text: 'Tertiary button'
}