import React from 'react'
import { storiesOf } from '@storybook/react'
import { styled } from 'view-container'
import { Button, BaseButtonStandardProps, ButtonState } from 'atoms/Button'

const handleAlert = event => alert('eh')
const Icon = props => <span>icon</span>

const StyledButton = styled.withComponent(Button) `
  color: hotpink;
  background: #222;
`

// @todo !!! LOTS TO FINISH HERE
storiesOf('atoms/Button', module)
  .add('default', () => <Button />)
  .add('text', () => <Button text="canada" />)
  .add('link', () => (
    <Button isLink to="https://google.com" text="google.com" />
  ))
  .add('onClick', () => <Button onClick={handleAlert} text="eh" />)
  .add('submit', () => (
    <Button onSubmit={handleAlert} text="submit" type="submit" />
  ))
  .add('icon', () => <Button icon={<Icon />} text="clickbait" />)
  .add('animated', () => <Button isAnimated text="animated" />)
  .add('styled', () => <StyledButton text="stylez" />)

  .add('renderIconAndText', () => {
    // see the @todo in the button
    const renderIconAndText = (
      props: BaseButtonStandardProps,
      state: ButtonState
    ) => {
      return 'unused'
      // return (
      //   <span>
      //     props: {props.text}
      //     {props.icon}; icon and text - the props has all the things
      //   </span>
      // )
    }

    const render = (props: BaseButtonStandardProps, state: ButtonState) => {
      return (
        <React.Fragment>
          <p>text prop: {props.text}</p>
          <p>icon prop: {props.icon}</p>
          <p>icon and text - the props has all the things</p>
        </React.Fragment>
      )
    }
    const iconView = <Icon />
    return (
      <Button
        text="eh"
        icon={iconView}
        renderIconAndText={renderIconAndText}
        render={render}
      />
    )
  })

// .add('ButtonWithIcon', () => <ButtonWithIcon />)
// storiesOf('FlatButton', module)
//   .add('TextButton', () => <TextButton />)
//   .add('FlatButton', () => <FlatButton />)
//   .add('isLink', () => <FlatButton isLink />)
//   .add('isFlat', () => <FlatButton isFlat />)
//   .add('isLink + to=', () => <FlatButton isFlat to={'canada.ca'} />)
// storiesOf('ButtonGroup').add('ButtonGroup', () => <ButtonGroup />)
// storiesOf('GreenButton', module).add('default', () => <GreenButton />)
// storiesOf('BlueButton', module)
//   .add('default', () => <BlueButton />)
//   .add('isDisabled', () => <BlueButton isDisabled disabled />)
//   .add('pushed - todo', () => <BlueButton pushed />)
// storiesOf('GhostButton', module).add('default', () => <GhostButton />)