import React from 'react'
import { storiesOf } from '@storybook/react'
import { checkA11y } from '@storybook/addon-a11y'
import { styled } from 'view-container'
import Button from 'atoms/Button'

/**
 * customized skin for the button
 */
const CustomizedButton = styled.withComponent(Button)`
  background-color: grey;
  color: white;
  border: 0px solid #ccc;
  width: 200px;
`

function changeChildren() {
  return <div className="custom-btn">Custom Button</div>
}

storiesOf('atoms/Button', module)
  .addDecorator(checkA11y)
  .add('default', () => <Button breedType="text" text="add to cart" />)
  .add('with icon', () => (
    <Button breedType="icon" iconType="plus" text="add to cart" />
  ))
  .add('icon with text', () => (
    <Button breedType="icon-with-text" text="add to cart" />
  ))
  .add('icon with text position change', () => (
    <Button
      breedType="icon-with-text"
      text="add to cart"
      iconAlignType="suffix"
    />
  ))
  .add('customized', () => (
    <CustomizedButton
      breedType="icon-with-text"
      iconType="email"
      text="Email"
    />
  ))
  .add('change children', () => (
    <CustomizedButton
      breedType="default"
      renderChildren={changeChildren}
      iconType="email"
      text="Email"
    />
  ))