import React from 'react';
import { View } from 'react-native';
import { Button, Text, color, transparentize } from 'nixplay-ui-kit';
import PropTypes from 'prop-types';
import i18n from '~/locale/i18n';
import { debounceWrapper } from '~/lib/utils';


const ButtonEx = debounceWrapper(Button);
const opacity = 0.76;

const styles = {
	frameContent: {
		justifyContent: 'center',
	},
	frameOuterBorder: {
		borderWidth: 2,
		borderColor: color.grey02,
		borderStyle: 'dashed',
		height: 259,
		width: 208,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: color.mistBlue01,
	},
	frameInnerBorder: {
		borderWidth: 2,
		borderColor: color.grey02,
		borderStyle: 'dashed',
		height: 216,
		width: 165,
		justifyContent: 'center',
		alignItems: 'center',
	},
	pairButton: {
		width: 70,
		height: 70,
		borderRadius: 35,
	},
	pairText: {
		marginTop: 5,
	},
};

export const PairEmptyFrame = (props) => (
	<View style={styles.frameContent}>
		<View
			style={styles.frameOuterBorder}
			opacity={opacity}
		>
			<View
				style={styles.frameInnerBorder}
				opacity={opacity}
			>
				<ButtonEx
					testID="PairFrame"
					type="circle"
					color="white"
					shadow="short"
					style={styles.pairButton}
					onPress={props.pairFrame}
				>
					<Button.Icon color={props.isConnected ? 'blue' : transparentize(color.grey04, 50)} name="frame-add" size={32} />
				</ButtonEx>
				<Text textStyle="footnote" style={styles.pairText}>{i18n.t('frames.pairFrame')}</Text>
			</View>
		</View>
	</View>
);

PairEmptyFrame.propTypes = {
	pairFrame: PropTypes.func.isRequired,
	isConnected: PropTypes.bool,
};


PairEmptyFrame.defaultProps = {
	isConnected: true,
};
