import React from 'react';
import { TouchableHighlight, Text } from 'react-native';

import styles from './styles';
import { themes } from '../../constants/colors';

const ButtonNumber = ({
	text, disabled, theme, onPress
}) => (
	<TouchableHighlight
		style={[
			styles.buttonCircle,
			{ backgroundColor: themes[theme].backgroundColor },
			// this.props.styleButtonCircle,
		]}
		// underlayColor={this.props.numbersButtonOverlayColor}
		disabled={disabled}
		// onShowUnderlay={() => this.setState({ textButtonSelected: text })}
		// onHideUnderlay={() => this.setState({ textButtonSelected: "" })}
		// onPress={() => {
		// 	this.onPressButtonNumber(text);
		// }}
		onPress={() => onPress && onPress(text)}
		// accessible
		// accessibilityLabel={text}
	>
		<Text
			style={[
				styles.text,
				// this.props.styleTextButton,
				// {
				// 	opacity: opacity,
				// 	color: this.state.textButtonSelected === text
				// 			? this.props.styleColorButtonTitleSelected
				// 			: this.props.styleColorButtonTitle
				// }
			]}
		>
			{text}
		</Text>
	</TouchableHighlight>
);

export default ButtonNumber;