import * as React from 'react'
import { Props, Select, SelectSize } from '.'
import { Meta, Story } from '@storybook/react'

export default {
  title: 'components/Select',
  component: Select,
  argTypes: { onChange: { action: 'changed' } },
} as Meta

const Template: Story<Props> = ({ ref, ...args }) => (
  <>
    Text here
    {' '}
    <Select
      {...args}
    />
    {' '}
    Other text here
  </>
)

export const Default = Template.bind({})
Default.args = {
  border: true,
  label: '',
  hint: '',
  size: SelectSize.MEDIUM,
  children: (
    <>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </>
  )
}

export const WithLabel = Template.bind({})
WithLabel.args = {
  border: true,
  label: 'Foo',
  children: (
    <>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </>
  )
}

export const WithLabelAndHint = Template.bind({})
WithLabelAndHint.args = {
  border: true,
  label: 'Foo',
  hint: '(example value)',
  children: (
    <>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </>
  )
}

export const WithLabelAndHintAlternate = Template.bind({})
WithLabelAndHintAlternate.args = {
  border: true,
  alternate: true,
  label: 'Foo',
  hint: '(example value)',
  children: (
    <>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </>
  )
}

export const WithLabelAndHintAlternateBorderless = Template.bind({})
WithLabelAndHintAlternateBorderless.args = {
  alternate: true,
  label: 'Foo',
  hint: '(example value)',
  children: (
    <>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </>
  )
}

export const WithLabelAndHintBorderless = Template.bind({})
WithLabelAndHintBorderless.args = {
  label: 'Foo',
  hint: '(example value)',
  children: (
    <>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </>
  )
}

export const Block = Template.bind({})
Block.args = {
  border: true,
  block: true,
  children: (
    <>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </>
  )
}


export const WithLabelAndHintAlternateSmall = Template.bind({})
WithLabelAndHintAlternateSmall.args = {
  alternate: true,
  border: true,
  label: 'Foo',
  hint: '(example value)',
  size: SelectSize.SMALL,
  children: (
    <>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </>
  )
}

export const WithLabelAndHintAlternateLarge = Template.bind({})
WithLabelAndHintAlternateLarge.args = {
  alternate: true,
  border: true,
  label: 'Foo',
  hint: '(example value)',
  size: SelectSize.LARGE,
  children: (
    <>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </>
  )
}

export const WithLabelAndHintSmall = Template.bind({})
WithLabelAndHintSmall.args = {
  border: true,
  label: 'Foo',
  hint: '(example value)',
  size: SelectSize.SMALL,
  children: (
    <>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </>
  )
}

export const WithLabelAndHintLarge = Template.bind({})
WithLabelAndHintLarge.args = {
  border: true,
  label: 'Foo',
  hint: '(example value)',
  size: SelectSize.LARGE,
  children: (
    <>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </>
  )
}
