import React from 'react';
import { View } from 'react-native';
import PropTypes from 'prop-types';
import { Button, Text, color } from 'nixplay-ui-kit';

const styles = {
	button: {
		marginHorizontal: 8,
		alignItems: 'center',
		maxWidth: 85,
	},
	homeButton: {
		shadowOffset: {
			width: 0,
			height: 2,
		},
		elevation: 1,
		shadowColor: color.blue,
		shadowOpacity: 0.3,
	},
	homeButtonActive: {
		borderWidth: 2,
		borderColor: color.blue,
	},
	text: {
		textAlign: 'center',
		marginTop: 5,
		fontSize: 11,
		fontWeight: '600',
	},
};

export const IconButton = (props) => (
	<View style={styles.button}>
		{!props.disabled &&
			<Button testID={props.name} {...props} type="square" color={props.buttonColor} style={[styles.homeButton, props.isActive() && styles.homeButtonActive]}>
				<Button.Icon color={props.isActive() ? 'blue' : props.color} name={props.name} />
			</Button>
		}
		{props.disabled &&
			<Button testID={props.name} disabled type="square" color={props.buttonColor} style={[styles.homeButton, { backgroundColor: color.white, shadowOpacity: 0.1 }]}>
				<Button.Icon color="grey04" name={props.name} />
			</Button>
		}
		<Text textStyle="description" color={props.textColor} style={[styles.text, props.innerTextStyle]}>
			{props.text}
		</Text>
	</View>
);

IconButton.propTypes = {
	name: PropTypes.string.isRequired,
	text: PropTypes.string,
	buttonColor: PropTypes.string,
	textColor: PropTypes.string,
	color: PropTypes.string,
	disabled: PropTypes.bool,
	isActive: PropTypes.func,
	innerTextProps: PropTypes.object,
	innerTextStyle: PropTypes.object,
};

IconButton.defaultProps = {
	text: '',
	buttonColor: 'white',
	textColor: 'mistBlue04',
	color: 'mistBlue04',
	disabled: false,
	isActive: () => false,
	innerTextProps: {},
	innerTextStyle: {},
};
