import React from 'react'
import { storiesOf } from '@storybook/react'
import { styled } from 'view-container'
import ArrowIcon from 'icons/ArrowIcon'

interface State {
  isUp: boolean
  isDown: boolean
}
interface Props {}
class InfiniteAnimation extends React.Component<Props, State> {
  state = {
    isUp: true,
    isDown: false,
  }
  componentDidMount() {
    // every 2 seconds flip it
    const onInterval = () => {
      this.setState({ isUp: !this.state.isUp, isDown: !this.state.isDown })
    }
    setInterval(onInterval, 2000)
  }
  render() {
    console.debug('rendered infinite animation')
    return <ArrowIcon down={this.state.isDown} up={this.state.isUp} isAnimated />
  }
}

storiesOf('atoms/AnimatedArrowIcon', module)
  .add('Arrow Default', () => <ArrowIcon />)

  .add('DownArrow - not animated', () => <ArrowIcon down />)
  .add('UpArrow - not animated', () => <ArrowIcon up />)
  .add('DownArrow - isDown ', () => <ArrowIcon isDown />)
  .add('UpArrow - isUp ', () => <ArrowIcon isUp />)

  .add('DownArrow - animated prop', () => <ArrowIcon down animated />)
  .add('UpArrow - animated prop', () => <ArrowIcon up animated />)

  .add('DownArrow - animated up & down', () => <InfiniteAnimation />)

  .add('ArrowIcon - styled.withComponent', () => {
    const Customized = styled.withComponent(ArrowIcon)`
      /* probably not star, just path or shape or whatevrer*/
      * {
        fill: hotpink;
      }
    `

    return <Customized />
  })
// .add('RightIcon', () => <ArrowIcon right />)
// .add('LeftIcon', () => <ArrowIcon left />)