import React, { Component } from 'react';
import {
	View,
	StyleSheet,
} from 'react-native';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import {
	NixplayIcon,
	basicColor,
	Button,
	transparentize,
	color,
} from 'nixplay-ui-kit';
import { debounceWrapper } from '~/lib/utils';

const ButtonEx = debounceWrapper(Button);

const styles = StyleSheet.create({
	createNewIcon: {
		marginRight: 0,
	},
	headerButton: {
		flex: 1,
		marginVertical: 8,
		borderRadius: 8,
		padding: 0,
		borderColor: basicColor.mistBlue03,
		backgroundColor: 'rgba(254, 254, 254, 0.89)',
	},
});
class CTAHeader extends Component {
	static propTypes = {
		isConnected: PropTypes.bool.isRequired,
		onPress: PropTypes.func.isRequired,
		title: PropTypes.string.isRequired,
		iconHidden: PropTypes.bool,
		textSize: PropTypes.number,
		innerButtonStyle: PropTypes.object,
		innerButtonProps: PropTypes.object,
	}
	render() {
		const {
			iconHidden,
			innerButtonProps,
			innerButtonStyle,
			isConnected,
			onPress,
			textSize,
			title,
			...otherProps
		} = this.props;
		const buttonStyle = isConnected ? 'blue' : transparentize(color.grey04, 50);
		return (
			<View {...otherProps}>
				<ButtonEx
					testID="CTAHeader"
					style={styles.headerButton}
					type="secondary"
					onPress={onPress}
				>
					{!iconHidden &&
						<NixplayIcon
							name="plus-thick"
							size={12}
							color={buttonStyle}
							style={styles.createNewIcon}
						/>
					}
					<Button.Text
						{...innerButtonProps}
						color={buttonStyle}
						style={[{ fontSize: textSize }, innerButtonStyle]}
					>
						{title}
					</Button.Text>
				</ButtonEx>
			</View>
		);
	}
}


CTAHeader.defaultProps = {
	innerButtonStyle: {},
	innerButtonProps: {},
	iconHidden: false,
	textSize: 20,
};


const mapStateToProps = (state) => ({
	isConnected: state.network.isConnected,
});

export default connect(mapStateToProps, null, null, { forwardRef: true })(CTAHeader);
