import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';
import DeviceInfo from 'react-native-device-info'

import Touchable from './touchable'
import browser from './browser'

export default class Button extends Component {
  render() {
    let { buttonStyle, textStyle, ...others } = this.props
    let activeOpacity = 0.5
    let viewElementStyle = [ styles.button, buttonStyle ]
    let textElementStyle = [ styles.text, textStyle ]
    if (this.props.disabled) {
      viewElementStyle.push( styles.disabledButton )
      textElementStyle.push( styles.disabledText )
      activeOpacity = 1.0
    }
    return (
      <Touchable {...others} onPress={() => { if (! this.props.disabled) { this.props.onPress() }}}>
        <View style={viewElementStyle}>
          <Text style={textElementStyle}>
            {this.props.label}
          </Text>
        </View>
      </Touchable>
    )
  }
}

const styles = StyleSheet.create({
  text: {
    color: '#000',
    fontFamily: '"Futura-Medium", sans-serif',
    textAlign: 'center',
    padding: 0,
  },
  button: {
    padding: browser.isMobile ? 5 : 10,
    margin: browser.isMobile ? 5 : 10,
    borderRadius: 3,
    backgroundColor: '#fff',
    borderBottomColor: '#bbb',
    borderBottomWidth: 2,
  },
  disabledButton: {
    backgroundColor: '#bbb',
    borderBottomColor: '#888',
  },
  disabledText: {
    color: '#333',
  },
})