import React from 'react';
import _ from 'lodash';
import { View, Dimensions } from 'react-native';
import PropTypes from 'prop-types';
import { color } from 'nixplay-ui-kit';
import { Bezel } from '~comp/Frames/bezel';
import { FRAME_ORIENTATION, FRAME_POWER } from '~/store/frameConstants';
import setTestID from '~/test/testUtils';

const frameContainerSize = 0.35;

const styles = {
	frameContent: {
		alignSelf: 'center',
	},
	frameScrollView: {
		height: Dimensions.get('window').width,
		top: Dimensions.get('window').height * 0.07,
	},
	frameContainer: {
		height: Dimensions.get('window').height * frameContainerSize,
		width: Dimensions.get('window').height * frameContainerSize,
	},
	infoLabel: {
		paddingVertical: 8,
		paddingHorizontal: 16,
		backgroundColor: color.mistBlue04,
		borderRadius: 8,
		maxWidth: '90%',
		flexDirection: 'row',
		position: 'absolute',
		bottom: '25%',
	},
	infoText: {
		marginHorizontal: 15,
		color: color.white,
		textAlign: 'left',
	},
	icon: {
		top: 2,
	},
};

export const MiniFrame = (props) => (
	<View
		style={[
			styles.frameContent,
			_.get(props, 'currentFrame.orientation') === FRAME_ORIENTATION.LANDSCAPE && { top: 20 },
			{ top: (props.noPlaylistAssigned) ? -10 : 0 },
		]}
		{...setTestID('viewMiniFrame')}
	>
		<View style={styles.frameContainer}>
			<Bezel
				{...props}
				bezel={_.get(props, 'currentFrame.bezel', {})}
				model={_.get(props, 'currentFrame.model', '')}
				color={_.get(props, 'currentFrame.color', '')}
				orientation={_.get(props, 'currentFrame.orientation') === FRAME_ORIENTATION.LANDSCAPE ? 'landscape' : 'portrait'}
				power={(props.currentFrame && props.currentFrame.power) || FRAME_POWER.ON}
				playlistId={_.get(props, 'currentFrame.slideshow', -1)}
				isConnected={!!props.currentFrame && props.currentFrame.online && props.isConnected}
				dimensions={_.get(props, 'currentFrame.dimensions', {})}
				needUpdate={!!props.currentFrame && props.currentFrame.needUpdate}
				languageCode={props.languageCode}
			/>
		</View>
	</View>
);

MiniFrame.propTypes = {
	currentFrame: PropTypes.object.isRequired,
	playlistLength: PropTypes.number.isRequired,
	thumbs: PropTypes.array.isRequired,
	openPlaylist: PropTypes.func.isRequired,
	carousel: PropTypes.bool.isRequired,
	refreshing: PropTypes.bool.isRequired,
	noPlaylistAssigned: PropTypes.bool.isRequired,
	isConnected: PropTypes.bool.isRequired,
	languageCode: PropTypes.string.isRequired,
};
