import { arrayToClassName } from 'elementor-app/utils/utils.js';

import Text from 'elementor-app/ui/atoms/text';
import Icon from 'elementor-app/ui/atoms/icon';
import Grid from 'elementor-app/ui/grid/grid';

import './notice.scss';

const iconsClassesMap = {
	danger: 'eicon-warning',
	info: 'eicon-info-circle-o',
	warning: 'eicon-warning',
};

export default function Notice( props ) {
	const baseClassName = 'eps-notice',
		classes = [ baseClassName, props.className ];

	if ( props.color ) {
		classes.push( baseClassName + '-semantic', baseClassName + '--' + props.color );
	}

	return (
		<Grid className={ arrayToClassName( classes ) } container noWrap alignItems="center" justify="space-between">
			<Grid item container alignItems="start" noWrap>
				{
					props.withIcon &&
					props.color &&
					<Icon className={ arrayToClassName( [ 'eps-notice__icon', iconsClassesMap[ props.color ] ] ) } />
				}

				<Text variant="xs" className="eps-notice__text">
					{ props.label && <strong>{ props.label + ' ' }</strong> }

					{ props.children }
				</Text>
			</Grid>

			{
				props.button &&
				<Grid item container justify="end" className={ baseClassName + '__button-container' }>
					{ props.button }
				</Grid>
			}
		</Grid>
	);
}

Notice.propTypes = {
	className: PropTypes.string,
	color: PropTypes.string,
	label: PropTypes.string,
	children: PropTypes.any.isRequired,
	icon: PropTypes.string,
	withIcon: PropTypes.bool,
	button: PropTypes.object,
};

Notice.defaultProps = {
	className: '',
	withIcon: true,
	button: null,
};