import React from 'react'
import Lottie from '../index';
import * as animationDataA from './pinjump.json'
import * as animationDataB from './TwitterHeart.json'

export default class LottieControl extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      isStopped: false,
      isPaused: false,
      speed: 1,
      direction: 1,
      isDataA: true,
      startFrame: 5,
      endFrame: 10
    };

  }

  render() {
    const centerStyle = {
      display: 'block',
      margin: '10px auto',
      textAlign: 'center'
    };
    const {isStopped, isPaused, direction, speed, isDataA, startFrame, endFrame} = this.state;
    const defaultOptions = {animationData: (isDataA ? animationDataA : animationDataB )};

    return <div>
      <Lottie options={defaultOptions}
              height={400}
              width={400}
              isStopped={isStopped}
              isPaused={isPaused}
              speed={speed}
              segments={[startFrame, endFrame]}
              direction={direction}/>

      <p style={centerStyle}>Speed: x{speed}</p>
      <input style={centerStyle}
             type="range" value={speed} min="0" max="3" step="0.5"
             onChange={(e) => this.setState({speed: e.currentTarget.value})}/>
      <p style={centerStyle}>Segment range: [{startFrame}, {endFrame}]</p>
      <input style={centerStyle}
        type="text" value={startFrame}
        onChange={(e) => this.setState({ startFrame: e.currentTarget.value })} />
      <input style={centerStyle}
        type="text" value={endFrame}
        onChange={(e) => this.setState({ endFrame: e.currentTarget.value })} />
      <button style={centerStyle} onClick={() => this.setState({isStopped: true})}>stop</button>
      <button style={centerStyle} onClick={() => this.setState({isStopped: false})}>play</button>
      <button style={centerStyle} onClick={() => this.setState({isPaused: !isPaused})}>pause</button>
      <button style={centerStyle} onClick={() => this.setState({direction: direction * -1})}>change direction</button>
      <button style={centerStyle} onClick={() => this.setState({isDataA: !isDataA})}>toggle animation
      </button>
    </div>
  }
}

@@ -1461,24 +1461,33 @@
 startFrame: 
+parseInt(
 e.currentTar
@@ -1487,32 +1487,38 @@
 rentTarget.value
+) %7C%7C 0
  %7D)%7D /%3E%0A      %3Ci
@@ -1630,16 +1630,25 @@
 dFrame: 
+parseInt(
 e.curren
@@ -1660,16 +1660,22 @@
 et.value
+) %7C%7C 0
  %7D)%7D /%3E%0A

Fix for the segment range input