import React, {Component} from 'react';
import {
  Text,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  View,
} from 'react-native';
import PropTypes from 'prop-types';

const {height} = Dimensions.get('window');

class MyButton extends Component {
  constructor() {
    super();
  }

  static propTypes = {
    containerStyle: PropTypes.object,
    buttonStyle: PropTypes.object,
    textStyle: PropTypes.object,
    buttonEnabled: PropTypes.object,
    textEnabled: PropTypes.object,
    buttonDisabled: PropTypes.object,
    textDisabled: PropTypes.object,
    title: PropTypes.string,
    onPressIn: PropTypes.func,
    onPressOut: PropTypes.func,
    onPress: PropTypes.func,
    disabled: PropTypes.bool,
  };

  render() {
    const {
      containerStyle,
      buttonStyle,
      textStyle,
      buttonEnabled,
      textEnabled,
      buttonDisabled,
      textDisabled,
      title,
      onPressIn,
      onPressOut,
      onPress,
      disabled,
    } = this.props;

    const container = {...styles.container, ...containerStyle};
    const buttonDefault = {...styles.buttonStyle, ...buttonStyle};
    const textDefault = {...styles.textStyle, ...textStyle};
    const button = disabled
      ? {...buttonDefault, ...styles.buttonDisabled, ...buttonDisabled}
      : {...buttonDefault, ...styles.buttonEnabled, ...buttonEnabled};
    const text = disabled
      ? {...textDefault, ...styles.textDisabled, ...textDisabled}
      : {...textDefault, ...styles.textEnabled, ...textEnabled};
    return (
      <View style={container}>
        <TouchableOpacity
          disabled={disabled}
          style={button}
          onPressIn={onPressIn}
          onPressOut={onPressOut}
          onPress={onPress}>
          <Text style={text}>{title}</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    flex: 1,
  },
  textEnabled: {
    color: '#592202',
  },
  textDisabled: {
    color: '#a0a0a0',
  },
  textStyle: {
    flex: 1,
    fontSize: parseInt(height, 10) / 28,
    fontWeight: 'bold',
    textAlign: 'center',
    textAlignVertical: 'center',
  },
  buttonEnabled: {
    backgroundColor: '#e1c3a1',
    borderColor: '#BF7636',
  },
  buttonDisabled: {
    backgroundColor: '#e6e6e6',
    borderColor: '#D6D6D6',
  },
  buttonStyle: {
    alignSelf: 'center',
    height: parseInt(height, 10) / 8,
    width: '50%',
    borderRadius: 40,
    borderWidth: 4,
  },
});

export default MyButton;