import React from 'react';
import { useArgs } from '@storybook/preview-api';
import type { Meta, StoryObj } from '@storybook/react';
import TextButtonExternal from '../../buttons/TextButtonExternal/TextButtonExternal';
import { TextButton } from '../../buttons/TextButton/TextButton';
import Banner from './Banner';

/** The `Banner` component displays a dismissible message inside an HTML container.
 *
 * If `TextButtonExternal` is used to display links, it must contain an `href` to be focusable. Otherwise, use `<TextButton inline privateOptions={{ padding: 'none' }}>Text</TextButton>` to ensure keyboard navigation does not skip the link.
 */

const meta: Meta<typeof Banner> = {
	title: 'Alerts/Banner',
	component: Banner,
	argTypes: {
		buttonOnClick: { action: 'clicked' },
		onDismiss: { action: 'dismissed' },
		closeSize: {
			table: {
				defaultValue: { summary: 'm' },
			},
		},
		variant: {
			table: {
				defaultValue: { summary: 'neutral' },
			},
		},
		'aria-label': {
			description: "Accessible label for the element. Default values are provided for each variant, but are overridden by supplying a specific `aria-label`. Required to meet accessibility standards.",
			defaultValue: { summary: 'Information | Warning | Error | Success' },
		},
	},
	parameters: {
		controls: {
			include: [
				'aria-label',
				'variant',
				'closeSize',
				'className',
				'id',
				'buttonText',
				'buttonOnClick',
				'onDismiss',
				'style',
			],
		},
	},
	render: function Render(args) {
		const [{ children }] = useArgs<typeof args>();

		return (
			<Banner {...args}>
				<strong>Typewriter!</strong> {children} <TextButtonExternal href="#example-link">learn more</TextButtonExternal> <TextButton inline privateOptions={{ padding: 'none' }}>Text</TextButton>.
			</Banner>
		);
	},
};

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

export const Neutral: Story = {
	args: {
		variant: 'neutral',
		buttonText: 'Complete Setup',
		children: 'Poke or',
	},
};

export const Warning: Story = {
	args: {
		variant: 'warning',
		buttonOnClick: undefined,
	},
};

export const Error: Story = {
	args: {
		variant: 'error',
		buttonText: 'Retry',
		onDismiss: undefined,
		children: 'Poke selvage fam retro pug, offal butcher occupy or',
	},
};

export const Success: Story = {
	args: {
		variant: 'success',
		buttonOnClick: undefined,
		onDismiss: undefined,
		children: 'Poke selvage fam retro pug, offal butcher occupy or',
	},
};