import * as React from 'react';
import classnames from 'classnames';
import IReactComponentProps from '../../../common/structures/IReactComponentProps';
import styles from './Banner.scss';
import Close from '../../buttons/Close/Close';
import { FunctionGeneric } from '../../../common/structures/Generics';
import { Button } from '../../buttons/Button/Button';
import { CircleInfoIcon, SuccessIcon, YieldIcon } from '../../icons/Icons';

export interface BannerProps extends IReactComponentProps {
	/** Text displayed in inline button. Depends on `buttonOnClick`. */
	buttonText?: string;
	/** Function called when clicking inline button. Depends on `buttonText`. */
	buttonOnClick?: FunctionGeneric;
	/** Function called when dismissing banner. Dismiss button will not show if `onDimiss` is `undefined`. */
	onDismiss?: FunctionGeneric;
	/** Color/icon used in general banner styling. */
	variant?: 'warning' | 'neutral' | 'success' | 'error';
	/** Size of the close icon. */
	closeSize?: 's' | 'm' | 'l';
}

const Banner = (props: BannerProps) => {
	const {
		'aria-label': ariaLabel,
		variant = 'neutral',
		closeSize = 'm',
		className,
		id,
		style,
		children,
		buttonText,
		buttonOnClick,
		onDismiss,
	} = props;

	const renderIcon = () => {
		switch (variant) {
			case 'error':
				return <YieldIcon width={18} aria-hidden />;
			case 'warning':
				return <YieldIcon width={18} aria-hidden />;
			case 'success':
				return <SuccessIcon aria-hidden />;
			case 'neutral':
			default:
				return <CircleInfoIcon aria-hidden />;
		}
	};

	const renderLabel = {
			error: 'Error',
			warning: 'Warning',
			success: 'Success',
			neutral: 'Information',
	}[variant] ?? 'Information';

	const renderButton = () => {
		return !buttonText || !buttonOnClick ? null : (
			<Button inline onClick={buttonOnClick} className={styles.CTA} style={{ padding: '7px 15px' }}>
				{buttonText}
			</Button>
		);
	};

	const renderDismiss = () => {
		return onDismiss ? (
			<Close aria-label="Dismiss this message" position="static" size={closeSize} className={classnames(styles.Dismiss)} onClick={onDismiss} />
		) : null;
	};

	return (
		<div
			className={classnames(
				styles.Banner,
				{
					[styles.Banner__Neutral]: variant === 'neutral',
					[styles.Banner__Error]: variant === 'error' || variant === 'warning',
					[styles.Banner__Success]: variant === 'success',
				},
				className
			)}
			id={id}
			style={style}
			role="status"
			aria-label={ariaLabel || renderLabel}
		>
			<div className={styles.Left_Wrapper}>
				<div className={styles.Icon_Wrapper}>{renderIcon()}</div>
				<span className={styles.Content}>{children}</span>
			</div>
			<div className={styles.Buttons_Container}>
				{renderButton()}
				{renderDismiss()}
			</div>
		</div>
	);
};

export default Banner;