import React from 'react';
import { useArgs } from '@storybook/preview-api';
import type { Meta, StoryObj } from '@storybook/react';
import { Alert as AlertComponent } from './Alert';

/** The `Alert` component displays an optionally dismissable message inside an HTML container. */

const meta: Meta<typeof AlertComponent> = {
	title: 'Alerts/Alert',
	component: AlertComponent,
	argTypes: {
		show: {
			table: {
				defaultValue: { summary: true },
			},
		},
		type: {
			table: {
				defaultValue: { summary: 'success' },
			},
		},
	},
	parameters: {
		controls: {
			include: ['aria-label', 'id', 'className', 'dismissable', 'onDismiss', 'type', 'show', 'style'],
		},
	},
	render: function Render(args) {
		const [{ onDismiss }, updateArgs] = useArgs<typeof args>();

		const handleDismiss = () => {
			updateArgs({ show: false });
			onDismiss?.('Function called when dismissing alert.');
		};

		return (
			<AlertComponent {...args} onDismiss={handleDismiss}>
				Lorem ipsum dolor sit amet, consectetur adipiscin elit, sed do eiusmod tempor.
			</AlertComponent>
		);
	},
};

export default meta;
type Story = StoryObj<typeof AlertComponent>;

export const Alert: Story = {
	args: {
		dismissable: true,
	},
};

export const AlertWarn: Story = {
	args: {
		type: 'warning',
	},
};