import React, { FC } from 'react';
import { PortalPosition, ToastProps } from 'types';
import Alert from 'components/Alert';
import CloseButton from 'components/CloseButton';
import Portal from 'components/Portal';
import { Slide } from 'components/wrappers';
import { useComponentLogic } from './hooks';

const determineSlideDirection = (position?: PortalPosition) => {
	switch (position) {
		default:
		case 'bottom-right':
		case 'right':
		case 'top-right':
			return 'left';
		case 'bottom-left':
		case 'left':
		case 'top-left':
			return 'right';
		case 'bottom':
			return 'up';
		case 'top':
			return 'down';
	}
};

export const Toast: FC<ToastProps> = props => {
	const { children, elevation, id, intent, portalPosition, ...rest } = props;
	const { onClick, slideIsVisible } = useComponentLogic(props);
	return (
		<Portal
			className={`portal ${portalPosition}`}
			id={`portal-${portalPosition}`}>
			<Slide
				direction={determineSlideDirection(portalPosition)}
				distance={200}
				isVisible={slideIsVisible}
				mb={0.5}
				retract
				{...rest}>
				<Alert elevation={elevation} intent={intent} radius={0.375}>
					{children}
					<CloseButton color="white" onClick={onClick} size={1.5} />
				</Alert>
			</Slide>
		</Portal>
	);
};

Toast.defaultProps = {
	elevation: 4,
	portalPosition: 'top-right',
};

export default Toast;