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

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

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

export const Default = Template.bind({})
Default.args = {
  border: true,
  label: '',
  hint: '',
  indicator: '',
  size: MultilineTextInputSize.MEDIUM,
}

export const WithLabel = Template.bind({})
WithLabel.args = {
  border: true,
  label: 'Foo',
}

export const WithLabelAndHint = Template.bind({})
WithLabelAndHint.args = {
  border: true,
  label: 'Foo',
  hint: '(example value)',
}

export const WithLabelAndHintAlternate = Template.bind({})
WithLabelAndHintAlternate.args = {
  border: true,
  alternate: true,
  label: 'Foo',
  hint: '(example value)',
}

export const WithLabelAndHintAlternateBorderless = Template.bind({})
WithLabelAndHintAlternateBorderless.args = {
  alternate: true,
  label: 'Foo',
  hint: '(example value)',
}

export const WithLabelAndHintBorderless = Template.bind({})
WithLabelAndHintBorderless.args = {
  label: 'Foo',
  hint: '(example value)',
}

export const Block = Template.bind({})
Block.args = {
  border: true,
  block: true,
}

export const WithLabelHintAndIndicator = Template.bind({})
WithLabelHintAndIndicator.args = {
  border: true,
  label: 'Foo',
  hint: '(example value)',
  indicator: 'A',
}

export const WithLabelHintAndIndicatorAlternate = Template.bind({})
WithLabelHintAndIndicatorAlternate.args = {
  alternate: true,
  border: true,
  label: 'Foo',
  hint: '(example value)',
  indicator: 'A',
}

export const WithLabelHintAndIndicatorAlternateSmall = Template.bind({})
WithLabelHintAndIndicatorAlternateSmall.args = {
  alternate: true,
  border: true,
  label: 'Foo',
  hint: '(example value)',
  indicator: 'A',
  size: MultilineTextInputSize.SMALL,
}

export const WithLabelHintAndIndicatorAlternateLarge = Template.bind({})
WithLabelHintAndIndicatorAlternateLarge.args = {
  alternate: true,
  border: true,
  label: 'Foo',
  hint: '(example value)',
  indicator: 'A',
  size: MultilineTextInputSize.LARGE,
}

export const WithLabelHintAndIndicatorSmall = Template.bind({})
WithLabelHintAndIndicatorSmall.args = {
  border: true,
  label: 'Foo',
  hint: '(example value)',
  indicator: 'A',
  size: MultilineTextInputSize.SMALL,
}

export const WithLabelHintAndIndicatorLarge = Template.bind({})
WithLabelHintAndIndicatorLarge.args = {
  border: true,
  label: 'Foo',
  hint: '(example value)',
  indicator: 'A',
  size: MultilineTextInputSize.LARGE,
}

export const DisabledWithinFieldset: Story<Props> = ({ ref, disabled, ...args }) => (
  <fieldset
    disabled={disabled}
  >
    <MultilineTextInput
      {...args}
    />
  </fieldset>
)
DisabledWithinFieldset.args = {
  border: true,
  label: 'Foo',
  hint: '(example value)',
  disabled: true,
}
