import React, { Component, PropTypes } from 'react';
import {
  ActivityIndicator,
  LayoutAnimation,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Image,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

const LoginBtn = require('../../../img/button_04.png');

const { any, bool, func, string } = PropTypes;

class Button extends Component {

  static propTypes = {
    label: string,
    onPress: func,
    loading: bool,
    style: any,
    Active : bool,
  };

  static defaultProps = {
    loading: false,
    onPress: emptyFn,
    Active : true,
  };

  onPressButton = () => {
    const { loading, onPress } = this.props;

    LayoutAnimation.easeInEaseOut();
    onPress(!loading);
  }

  renderActivityIndicator() {
    if (this.props.loading) {
      return (
        <ActivityIndicator size="small" color="#fff" />
      );
    }
  }

  renderLabel() {
    const { label, loading,Active } = this.props;
    if(!loading) {
      return (
        <Text style={  Active ? styles.label2:styles.label}>{label}</Text>
      );
    }
  }

  render() {
    const { loading, style,Active} = this.props;

    return (
      <View>

      <TouchableOpacity
      disabled={Active}
        style={[
         styles.main,
          style,
          loading ? styles.loading : null,
        ]}
        activeOpacity={0.4}
        onPress={this.onPressButton}
      >
        <Image source={LoginBtn} style={Active ? styles.Butt2:styles.Butt}>

        </Image>
        <View style={{position:'absolute', top:-5, backgroundColor:'transparent', textAlign:'center', left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}>
          {this.renderLabel()}
          {this.renderActivityIndicator()}
        </View>


      </TouchableOpacity>
      </View>

    );
  }
}

function emptyFn() {}

const styles = StyleSheet.create({
  main: {

    paddingLeft:55,
    paddingRight:55,
    // backgroundColor: 'red',
    borderRadius: 20,
    // padding: 10,
    // paddingLeft: 135,
    // paddingRight: 135,

  },
  Butt : {
    height:50, paddingRight:100, width:null, resizeMode:'contain', opacity:1
  },
  Butt2 : {
    height:50, paddingRight:100, width:null, resizeMode:'contain', opacity:0.6
  },
  main2: {

    paddingLeft:55,
    paddingRight:55,
    // backgroundColor: 'red',
    borderRadius: 20,
    // padding: 10,
    // paddingLeft: 135,
    // paddingRight: 135,
   backgroundColor: 'rgba(255,255,255,0.9)',
  },
  label: {
    color: '#fff',
    fontWeight: 'bold',
    textAlign: 'center',
    backgroundColor: 'transparent',
  },
  label2: {
    color: 'rgba(255,255,255,0.4)',
    fontWeight: 'bold',
    textAlign: 'center',
    backgroundColor: 'transparent',
  },
  loading: {
    // padding: 10,
    // paddingLeft: 10,
    // paddingRight: 10,
  },
  buttonNextWrappr:{
  // resizeMode: "stretch"
},

});

export default Button;