import { Component } from 'react';
import
{
  Text,
  View,
  StyleSheet,
  TouchableNativeFeedback,
  TouchableOpacity,
  Platform,
  type ButtonProps
} from 'react-native';

class Button extends Component<ButtonProps>
{
  constructor(props: ButtonProps | Readonly<ButtonProps>)
  {
    super(props);
  };

  _renderInnerText()
  {
    return (
      <View style={ styles.button }>
        <Text style={ styles.text } disabled={ this.props.disabled }>
          { this.props.title }
        </Text>
      </View>
    );
  }

  render()
  {
    let touchableProps =
    {
      disabled: this.props.disabled,
      onPress: this.props.onPress
    };

    if (Platform.OS === 'android')
    {
      touchableProps = Object.assign(touchableProps, { background: TouchableNativeFeedback.SelectableBackground() });
      return (
        <TouchableNativeFeedback { ...touchableProps }>
          { this._renderInnerText() }
        </TouchableNativeFeedback>
      );
    }
    else
    {
      return (
        <TouchableOpacity { ...touchableProps }>
          { this._renderInnerText() }
        </TouchableOpacity>
      );
    }
  }
}

const styles = StyleSheet.create(
{
  button:
  {
    ...Platform.select(
    {
      ios: { },
      android:
      {
        elevation: 4,
        backgroundColor: '#2196F3',
        borderRadius: 2
      }
    })
  },
  text:
  {
    textAlign: 'center',
    margin: 6,
    fontSize: 12,
    ...Platform.select(
    {
      ios:
      {
        color: '#007AFF'
      },
      android:
      {
        color: 'white',
        fontWeight: '500'
      }
    })
  }
});

export default Button;