import React, { Fragment, useState } from 'react';
import { Button, Notification, NotificationStack } from 'lundium';
import { reject } from 'ramda';

export default {
	title: 'Others/NotificationStack',
	component: NotificationStack,
};

const getNotification = id => ({
	type: 'success',
	id,
});

export const basic = () =>
	// Workaround to be able to see code in story
	React.createElement(() => {
		const [currentId, setCurrentId] = useState(1);
		const [notifications, setNotifications] = useState([getNotification(0)]);

		const addNotification = () => {
			setNotifications([...notifications, { id: currentId, type: 'success' }]);
			setCurrentId(currentId + 1);
		};

		const removeNotification = idToRemove => {
			setNotifications(reject(({ id }) => id === idToRemove, notifications));
		};

		return (
			<Fragment>
				<Button kind="primary" onClick={addNotification}>
					Open me!
				</Button>
				<NotificationStack
					notifications={notifications}
					// Default transition for ilustration, not mandatory
					transition={{
						timeout: 500,
						classNames: 'slide-from-right',
					}}
					renderNotification={({ type, id, ...rest }) => (
						<Notification
							type={type}
							onClose={() => removeNotification(id)}
							{...rest}
						>
							Notification content {id}
						</Notification>
					)}
				/>
			</Fragment>
		);
	});