import React, { Component, PropTypes } from 'react';
import {
  View,
  TouchableWithoutFeedback,
  Animated
} from 'react-native';
import {
  Surface,
  Shape,
  Path
} from 'ReactNativeART';

export const DynamicButtonType = {
	'Play': 'play',
	'Pause': 'pause',
	'Stop': 'stop',
};

export class DynamicButton extends Component {
  
  constructor(props) {
    super(props);
    
    this.state = {scale: 1.0};
    console.log("Start 1");
  }
  
  componentWillMount() {
    console.log("componentWillMount");
    this.scaleAnim = new Animated.Value(1);
    this.scaleAnim.addListener(({value}) => {
      this.setState({scale: value});
      console.log("Update scale " + this.state.scale);
    });
  }
  
  currentPath() {
	const width = this.props.style.width * this.state.scale;
    const height = this.props.style.height * this.state.scale;
    const padding = this.props.padding;
    const type = this.props.type;
    if (type == DynamicButtonType.Play) {
	  return Path()
		.moveTo(padding, padding)
		.lineTo(width - padding, height / 2)
		.lineTo(padding, height - padding)
		.close();
	} else if (type == DynamicButtonType.Pause) {
	  return Path()
		.moveTo(width * 0.35, padding)
		.lineTo(width * 0.35, height - padding)
        .moveTo(width * 0.65, padding)
		.lineTo(width * 0.65, height - padding)
		.close();
	} else if (type == DynamicButtonType.Stop) {
      return Path()
		.moveTo(padding, padding)
		.lineTo(width - padding, padding)
        .lineTo(width - padding, height - padding)
		.lineTo(padding, height - padding)
        .lineTo(padding, padding)
		.close();
    }
  }	
  	
  render() {
    const width = this.props.style.width * this.state.scale;
    const height = this.props.style.height * this.state.scale;
    const d = this.currentPath();
    console.log("render 1");
    return (
      <TouchableWithoutFeedback onPress={this._onPress} onPressIn={this._onPressIn.bind(this)} onPressOut={this._onPressOut}>
        <View style={{width: width, height: height, backgroundColor: '#FF0000'}}>
          <Surface width={width} height={height}>
          <Shape stroke={this.props.strokeColor} strokeWidth={this.props.strokeWidth} d = {d} />
        </Surface>
        </View>
      </TouchableWithoutFeedback>
    );
  }
  
  
  // Touch 
  _onPress() {
	console.log("_onPress");
  }
  
  _onPressIn() {
    console.log("_onPressIn WTF");
    if (this.scaleAnim) {
      console.log("AAAA");
    } else {
      console.log("BBBB");
    }
    Animated.timing(
      this.scaleAnim, 
      {
        toValue: 1.2,
      }
    ).start();
  }
  
  _onPressOut() {
    console.log("_onPressOut");
  }
}

DynamicButton.propTypes = {
  strokeColor: PropTypes.string,
  strokeWidth: PropTypes.number,
  padding: PropTypes.number,
  type: PropTypes.oneOf([DynamicButtonType.Play, DynamicButtonType.Pause, DynamicButtonType.Stop]),
};

DynamicButton.defaultProps = {
  strokeColor: '#9FABFF',
  strokeWidth: 8,
  padding: 40,
  type: DynamicButtonType.Play,
};
@@ -397,18 +397,35 @@
  = %7B
-scale: 1.0
+padding: this.props.padding
 %7D;%0A 
@@ -527,29 +527,31 @@
 );%0A    this.
-scale
+padding
 Anim = new A
@@ -564,17 +564,34 @@
 d.Value(
-1
+this.props.padding
 );%0A    t
@@ -590,29 +590,31 @@
 );%0A    this.
-scale
+padding
 Anim.addList
@@ -654,21 +654,23 @@
 tState(%7B
-scale
+padding
 : value%7D
@@ -719,21 +719,23 @@
 s.state.
-scale
+padding
 );%0A    %7D
@@ -799,35 +799,16 @@
 le.width
- * this.state.scale
 ;%0A    co
@@ -843,35 +843,16 @@
 e.height
- * this.state.scale
 ;%0A    co
@@ -866,29 +866,29 @@
 ding = this.
-props
+state
 .padding;%0A  
@@ -1658,35 +1658,16 @@
 le.width
- * this.state.scale
 ;%0A    co
@@ -1706,27 +1706,8 @@
 ight
- * this.state.scale
 ;%0A  
@@ -2342,29 +2342,31 @@
    if (this.
-scale
+padding
 Anim) %7B%0A    
@@ -2466,21 +2466,23 @@
    this.
-scale
+padding
 Anim, %0A 
@@ -2509,11 +2509,36 @@
 ue: 
-1.2
+this.props.paddingHightlight
 ,%0A  
@@ -2745,16 +2745,55 @@
 number,%0A
+  paddingHightlight: PropTypes.number,%0A
   type: 
@@ -2978,16 +2978,41 @@
 ng: 40,%0A
+  paddingHightlight: 20,%0A
   type: 

Update animation