import React from 'react';
import { View, Dimensions } from 'react-native';
import PropTypes from 'prop-types';
import { Text, color, NixplayIcon as Icon, transparentize } from 'nixplay-ui-kit';
import { FRAME_POWER } from '~/store/frameConstants';
import i18n from '~/locale/i18n';
import { config } from '~/config';

const { height, width } = Dimensions.get('window');
const aspectRatio = height / width;

const paddingHorizontal = (aspectRatio > 1.775) ? 0.15 : 0.09;

const styles = {
	labelContainer: {
		top: 10,
		// maxWidth: '80%',
		alignItems: 'center',
		paddingHorizontal: (width * paddingHorizontal),
	},
	infoLabel: {
		padding: 10,
		borderRadius: 8,
		backgroundColor: transparentize(color.mistBlue04, 30),
		justifyContent: 'space-between',
		flexDirection: 'row',
	},
	infoError: {
		backgroundColor: color.red,
	},
	infoSection: {
		flex: 6,
		justifyContent: 'flex-start',
		flexDirection: 'row',
	},
	infoText: {
		marginHorizontal: 15,
		color: color.white,
	},
	underline: {
		textDecorationLine: 'underline',
	},
	infoLink: {
		color: color.mistBlue05,
	},
	iconSection: {
		flex: 0.5,
		justifyContent: 'flex-start',
		flexDirection: 'column',
	},
	icon: {
		top: 2,
	},
	iconUnconnected: {
		top: 2,
		alignSelf: 'flex-end',
	},
};

function getTextLabel(text, onPress, nestedTextComponent, isError = false, marginBottom = 8, top = 0, opacity = 1) {
	return (
		<View
			style={[
				styles.infoLabel,
				isError && styles.infoError,
				{ marginBottom, top, opacity },
			]}
		>
			<Icon style={styles.icon} name="invalid" color="white" size={14} />
			<Text
				onPress={onPress}
				textStyle="subhead"
				style={[styles.infoText, { textAlign: 'center' }]}
			>{text}
				{nestedTextComponent}
			</Text>
		</View>);
}

function unconnectedFrame(text, onPress, nestedTextComponent, isError = false, marginBottom = 8, top = 0, opacity = 1) {
	return (
		<View
			style={[
				styles.infoLabel,
				isError && styles.infoError,
				{ marginBottom, top, opacity },
			]}
		>
			<View style={styles.iconSection}>
				<Icon style={styles.iconUnconnected} name="invalid" color="white" size={14} />
			</View>
			<View style={styles.infoSection}>
				<Text
					onPress={onPress}
					textStyle="subhead"
					style={styles.infoText}
				>{text}
					{nestedTextComponent}
				</Text>
			</View>
		</View>);
}

export const InfoLabel = (props) => {
	const labelText =
		(!props.needUpdate && (props.online && props.power === FRAME_POWER.ON &&
			props.noPlaylistAssigned && props.empty && !props.doesUserHavePlaylists)) ?
			'playlists.noPlaylistAssigned' : 'contents.noPhotosAvailable';
	return (
		<View style={styles.labelContainer}>
			{props.needUpdate &&
				getTextLabel(i18n.tWithComponent(
					'frames.requireUpdate',
					null,
					[
						(text) => (<Text key={text} style={styles.underline} onPress={() => { props.openWebview(`${config.urls.softwareUpdateHelp}`); }}>{text}</Text>),
					],
					(text) => (<Text key={text}>{text}</Text>),
				), undefined, undefined, true)}
			{!props.needUpdate && props.online && props.power === FRAME_POWER.OFF &&
				getTextLabel(i18n.t('common.off'), () => {}, null, false)
			}
			{!props.needUpdate && !props.online &&
				unconnectedFrame(
					i18n.t('frames.disconnectedFrameText'),
					() => props.openWebview(i18n.t('urls.helpUrl')),
					<Text
						onPress={() => props.openWebview(i18n.t('urls.helpUrl'))}
						textStyle="subhead"
						style={styles.infoLink}
					>{i18n.t('common.getHelp')}
					</Text>,
				)
			}
			{ props.empty && !props.needUpdate && props.online && getTextLabel(i18n.t(`${labelText}`), () => {}, null, false, undefined, undefined) }
		</View>
	);
};


InfoLabel.propTypes = {
	power: PropTypes.string,
	online: PropTypes.bool,
	needUpdate: PropTypes.bool,
	empty: PropTypes.bool.isRequired,
	openWebview: PropTypes.func,
	noPlaylistAssigned: PropTypes.bool.isRequired,
	doesUserHavePlaylists: PropTypes.bool.isRequired,
};

InfoLabel.defaultProps = {
	power: FRAME_POWER.OFF,
	online: false,
	needUpdate: false,
	openWebview: () => {},
};
