import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Banner from '../Banner/Banner';
import BannerCarouselComponent from './BannerCarousel';
import TextButtonExternal from '../../buttons/TextButtonExternal/TextButtonExternal';
import BannerCarouselExample from './BannerCarouselExample';

/** The `BannerCarousel` component displays a collection of `Banner` components inside an HTML container. */

const meta: Meta<typeof BannerCarouselComponent> = {
	title: 'Alerts/BannerCarousel',
	component: BannerCarouselComponent,
	parameters: {
		controls: {
			include: ['banners', 'className', 'id', 'style'],
		},
	},
};

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

const handleButtonClick = (event: HTMLElementEvent<HTMLButtonElement>) => {
	action('buttonOnClick')(event);
};

const handleDismiss = (event: HTMLElementEvent<HTMLButtonElement>) => {
	action('onDismiss')(event);
};

export const BannerCarousel: Story = {
	args: {
		id: 'BannerCarouselStory',
		banners: [
			{
				id: 'banner1',
				component: (
					<Banner
						variant="neutral"
						buttonText="Complete Setup"
						buttonOnClick={handleButtonClick}
						onDismiss={handleDismiss}
					>
						<strong>Typewriter!</strong> Poke or <TextButtonExternal href="#example-link">learn more</TextButtonExternal>.
					</Banner>
				),
			},
			{
				id: 'banner2',
				component: (
					<Banner
						variant="error"
						buttonText="Retry"
						onDismiss={handleDismiss}
						buttonOnClick={handleButtonClick}
					>
						<strong>Typewriter!</strong> Poke selvage fam retro pug, offal butcher occupy or{' '}
						<TextButtonExternal href="#example-link">learn more</TextButtonExternal>.
					</Banner>
				),
			},
			{
				id: 'banner3',
				component: (
					<Banner
						variant="success"
						buttonText="Celebrate good times"
						onDismiss={handleDismiss}
						buttonOnClick={handleButtonClick}
					>
						<strong>Typewriter!</strong> Poke selvage fam retro pug, offal butcher occupy or{' '}
						<TextButtonExternal href="#example-link">learn more</TextButtonExternal>.
					</Banner>
				),
			},
		],
	},
};

/** Note that storybook actions will not work in this interactive example. */

export const BannerCarouselInteractive: Story = {
	render: function Render() {
		return <BannerCarouselExample />;
	},
};