import React from 'react';
import {
	View,
	StyleSheet,
	Platform,
} from 'react-native';
import { zIndexRedDot } from '~/store/constants';
import { color } from 'nixplay-ui-kit';
import PropTypes from 'prop-types';

const styles = StyleSheet.create({
	dot: {
		backgroundColor: color.red,
		width: 10,
		height: 10,
		borderRadius: 5,
		position: 'absolute',
		zIndex: zIndexRedDot,
		elevation: (Platform.OS === 'android') ? zIndexRedDot : 0,
	},
	topLeft: {
		top: 0,
		right: 0,
	},
	topRight: {
		top: 0,
		right: 0,
	},
	bottomLeft: {
		bottom: 0,
		left: 0,
	},
	bottomRight: {
		bottom: 0,
		right: 0,
	},
});

const redDot = ({
	scale, margin, position, style,
}) => (<View style={[styles.dot, { margin, transform: [{ scale }] }, styles[position], style]} />);

redDot.propTypes = {
	scale: PropTypes.number,
	margin: PropTypes.number,
	position: PropTypes.oneOf(['topLeft', 'topRight', 'bottomLeft', 'bottomRight']),
	style: PropTypes.object,
};

redDot.defaultProps = {
	scale: 1,
	margin: 0,
	position: 'topRight',
	style: {},
};

export default redDot;
