import React, { Component } from 'react';
import Page from './Page'
import styles from './styles'
import { WebPlayer } from '../../components'

const code = `import React, { Component } from 'react'
import { AppRegistry, StyleSheet, Text, TouchableOpacity, Animated } from 'react-native'

// Wrap a component to make it animatable
const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity)

export default class App extends Component {

  state = {height: new Animated.Value(100)}

  startAnimation = () => {
    const {height} = this.state

    // Reset the value if needed
    height.setValue(100)

    // Start a spring animation
    Animated.spring(height, {toValue: 300, friction: 0.8}).start()
  }

  componentDidMount() {
    this.startAnimation()
  }

  render() {
    const {height} = this.state

    return (
      <AnimatedTouchableOpacity
        onPress={this.startAnimation}
        style={[styles.button, {height}]}
      >
        <Text style={styles.text}>
          Tap Me
        </Text>
      </AnimatedTouchableOpacity>
    )
  }
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'steelblue',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: 'white',
    fontSize: 42,
  },
})

AppRegistry.registerComponent('App', () => App)
`

export default class View extends Component {
  render() {
    return (
      <Page title={'Animated'}>
        <div style={styles.well}>
          <div style={styles.h3}>Animated</div>
          <div style={styles.p}>
            The <code>Animated</code> API helps you interpolate values used in component styles. There are two parts to the API.
          </div>
          <div style={styles.h4_monospace}>Animated.Value</div>
          <div style={styles.p}>
            <code>Animated.Value</code> wraps a value that we want to interpolate. This is typically a number, but can also be a string (e.g. a color). To wrap a value, call <code>new Animated.Value(value)</code> with your value.
          </div>
          <div style={styles.h4_monospace}>Animated.View | Animated.Text | Animated.Image | Animated.createAnimatedComponent(Component)</div>
          <div style={styles.p}>
            <code>Animated</code> provides specially wrapped versions of the standard <code>View</code>, <code>Text</code>, and <code>Image</code> components. These wrapped components can have <code>Animated.Value</code>s in their <code>style</code> prop. If you want to animate something other than one of these three, you can wrap any component yourself, e.g. <code> AnimatedButton = Animated.createAnimatedComponent(Button)</code>.
          </div>
        </div>
        <div style={styles.well}>
          <div style={styles.h3}>Example</div>
          <WebPlayer code={code} />
        </div>
        <div style={styles.well}>
          {this.props.navigatorButton}
        </div>
      </Page>
    )
  }
}

@@ -1656,24 +1656,153 @@
 two 
-parts to the API
+APIs we need to set up an animation. We need to wrap a value that we want to interpolate, and then we need to use it in the styles of a component
 .%0A  
@@ -2142,16 +2142,158 @@
 r value.
+ If we call, e.g. %3Ccode%3Enew Animated.Value(200)%3C/code%3E, this means we want the initial state of some animated property to be %3Ccode%3E200%3C/code%3E.
 %0A       
@@ -2921,32 +2921,1248 @@
          %3C/div%3E%0A
+          %3Cdiv style=%7Bstyles.h4%7D%3EStarting the animation%3C/div%3E%0A          %3Cdiv style=%7Bstyles.p%7D%3E%0A            Once we have our wrapped values and components set up, we need to specify the target value of our animation and the easing function used during interpolation. After that, we start the animation. This will look something like %3Ccode%3E%7B'Animated.spring(value, %7BtoValue: 300, friction: 0.8%7D).start()'%7D%3C/code%3E. Here are a few of the common ways to interpolate values:%0A          %3C/div%3E%0A          %3Cul%3E%0A            %3Cli%3E%3Ccode%3E%7B'spring(value, %7BtoValue, friction = 7, tension = 40%7D)'%7D%3C/code%3E - spring to a new value%3C/li%3E%0A            %3Cli%3E%3Ccode%3E%7B'decay(value, %7Bvelocity, deceleration = 0.997%7D)'%7D%3C/code%3E - decay the value to 0, provided an initial velocity%3C/li%3E%0A            %3Cli%3E%3Ccode%3E%7B'timing(value, %7BtoValue, duration = 500, delay = 0, easing = Easing.inOut(Easing.ease)%7D)'%7D%3C/code%3E - ease into a new value, given an %3Ca href=%7B'https://facebook.github.io/react-native/docs/easing.html'%7D%3Eeasing function%3C/a%3E%3C/li%3E%0A          %3C/ul%3E%0A          %3Cdiv%3E%0A            The full list of methods on %3Ccode%3EAnimated%3C/code%3E is available %3Ca href=%7B'https://facebook.github.io/react-native/docs/animated.html#methods'%7D%3Ehere%3C/a%3E.%0A          %3C/div%3E%0A
         %3C/div%3E%0A 

Update Animated with interpolation functions