import React from 'react';
import _ from 'lodash';
import PropTypes from 'prop-types';
import { View } from 'react-native';
import { IconButton } from '~comp';
import { FRAME_POWER } from '~/store/frameConstants';

const styles = {
	bottomBar: {
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'flex-start',
		width: '100%',
	},
};

const HomeButtonsComponent = (props) => (
	<View {...props} style={[styles.bottomBar, { ...props.style }]}>
		{ !props.currentFrame.online &&
				props.offButtons().map(({
					name, text, color, onPress,
				}) =>
					(<IconButton
						key={name}
						name={name}
						text={text}
						disabled={name === 'power' || !props.isConnected}
						color={color}
						onPress={() => onPress(props.currentFrame.id)}
					/>))
		}
		{ props.currentFrame.online && props.currentFrame.power === FRAME_POWER.OFF &&
					props.offButtons().map(({
						name, text, color, onPress,
					}) =>
						(<IconButton
							key={name}
							name={name}
							text={text}
							color={color}
							onPress={() => onPress(props.currentFrame.id)}
							disabled={!props.isConnected}
						/>))
		}
		{ props.currentFrame.online && props.currentFrame.power === FRAME_POWER.ON &&
					props.onButtons().map(({
						name, text, color, onPress, isActive,
					}) =>
						(<IconButton
							key={name}
							name={name}
							text={text}
							color={color}
							isActive={isActive}
							onPress={onPress}
							disabled={!props.isConnected}
						/>))
		}
	</View>
);

HomeButtonsComponent.propTypes = {
	currentFrame: PropTypes.object.isRequired,
	onButtons: PropTypes.func.isRequired,
	offButtons: PropTypes.func.isRequired,
	isConnected: PropTypes.bool.isRequired,
	style: PropTypes.object,
	noPlaylistAssigned: PropTypes.bool,
};

HomeButtonsComponent.defaultProps = {
	style: {},
	noPlaylistAssigned: false,
};

export const HomeButtons = React.memo(HomeButtonsComponent, _.isEqual);
