import Builder, { ColorsControl, IconsControl, toProps } from '../../utils/builder';

export default {
	title: 'Components/Alert',
	argTypes: {
		icon: IconsControl,
		color: ColorsControl,
	},
};

const Template = new Builder(
	args => `<x-alert ${toProps(args)}>
		<p>Lorem ipsum dolor sit amet <code>consectetur</code> adipisicing elit. Mollitia consectetur similique adipisci expedita eum suscipit fuga cumque architecto veniam necessitatibus deserunt totam dolor molestias earum quaerat <a href="javascript:;">sapiente laborum</a>, quidem voluptates.</p>
		<hr>
		<p class="text-right">Best regards; I.S.</p>
	</x-alert>`,
);

export const Simple = Template.args({
	color: 'default',
	header: 'Alert title',
}).build();

export const Colors = Template.args({}).build(
	() => `<div>
	${ColorsControl.options
		.map(
			color => `<x-alert header="${color}" color="${color}">
		<p>Lorem ipsum dolor sit amet <b>consectetur</b> adipisicing elit.</p>
	</x-alert>`,
		)
		.join('')}
</div>`,
);

export const WithIcon = Template.args({
	color: 'primary',
	icon: 'activity',
	header: 'Alert title',
}).build();

export const Remember = Template.args({
	color: 'blue',
	icon: 'idea',
	header: 'Remember...',
}).build();

export const TechnicalStuff = Template.args({
	color: 'indigo',
	icon: 'testing',
	header: 'Technical Stuff',
}).build();

export const Warning = Template.args({
	color: 'warning',
	icon: 'hand',
	header: 'Warning!',
}).build();

export const AvoidDoingIt = Template.args({
	color: 'danger',
	icon: 'danger',
	header: 'Avoid doing it.',
}).build();
