import React from 'react'
import { storiesOf } from '@storybook/react'
import { styled } from 'view-container'
import PlusMinusIcon, { PlusVector, MinusVector } from 'icons/PlusMinusIcon'

const handleClick = data => {
  console.log('-- handleClick', data)
  // eslint-disable-next-line no-alert
  alert('handleClick method called... [ see console.log ]')
}

// NOTE: here's an example of a custom styled PlusMinusIcon
const AltIcon = styled.withComponent(PlusMinusIcon) `
  width: 48px;

  ${props =>
    props.isDisabled
      ? styled.css `
          cursor: wait;
          fill: red;
        `
      : styled.css `
          cursor: grab;
          fill: green;
        `};
`

// NOTE:  this example is a styled PlusIcon with animation...
const createCustom = component => {
  return styled.withComponent(component) `
    @keyframes fadeInUpBig {
      from {
        opacity: 0;
        transform: translate3d(0, 2000px, 0);
      }

      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    width: 120px;
    fill: grey;
    animation-duration: 1s;
    animation-name: fadeInUpBig;
    transition: transform .5s;

    &:hover {
      fill: red;
      transform: rotate(45deg) scale(2) translateX(25%);
    }
  `
}

const PlusPlus = createCustom(PlusVector)
const PlusMore = createCustom(PlusMinusIcon)

storiesOf('atoms/PlusMinusIcon', module)
  .add('1. default', () => <PlusMinusIcon onClick={handleClick} />)
  .add('2. plus', () => <PlusMinusIcon type="plus" />)
  .add('3. plus isDisabled', () => (
    <PlusMinusIcon type="plus" isDisabled={true} />
  ))
  .add('4. minus', () => <PlusMinusIcon type="minus" />)
  .add('5. minus isDisabled', () => (
    <PlusMinusIcon type="minus" isDisabled={true} />
  ))
  .add('6. alt plus', () => <AltIcon type="plus" />)
  .add('7. alt plus isDisabled', () => (
    <AltIcon type="plus" isDisabled={true} />
  ))
  .add('8. alt minus', () => <AltIcon type="minus" />)
  .add('9. alt minus isDisabled', () => (
    <AltIcon type="minus" isDisabled={true} />
  ))
  .add('10. raw plus', () => <PlusVector />)
  .add('11. raw minus', () => <MinusVector />)
  .add('12. raw plus styled', () => <PlusPlus onClick={handleClick} />)
  .add('13. nowrap plus', () => (
    <PlusMinusIcon onClick={handleClick} nowrap="true" />
  ))
  .add('14. nowrap plus styled', () => (
    <PlusMore onClick={handleClick} nowrap="true" />
  ))