import Builder, { ColorsControl, IconsControl, toProps } from "../../utils/builder";
export default {
    title: 'Components/Notification',
    component: 'x-notification',
    argTypes: {
        color: ColorsControl,
        icon: IconsControl,
    },
};
const Template = new Builder(args => `<x-notification ${toProps(args)}></x-notification>`);
export const Simple = Template.args({}).build(args => `<x-notification ${toProps(args)}>
	Hello World
</x-notification>`);
export const Colors = Template.args({}).build(() => `<div>
	${ColorsControl.options.map(color => `<x-notification class="d-inline-block mb-2 mr-3" icon="paint-brush" color="${color}">${color}</x-notification>`).join('')}
</div>`);
export const WithTitle = Template.args({
    color: 'success',
}).build(args => `<x-notification ${toProps(args)}>
	<h4>Notification title</h4>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</x-notification>`);
export const WithIcon = Template.args({
    color: 'indigo',
    icon: 'bug',
}).build(args => `<x-notification ${toProps(args)}>
	<small class="float-right">4s ago</small>
	<h4>New bug reported</h4>
	<p>Please verify at line 234 in new project, and create a pull request</p>
</x-notification>`);
export const WithInterval = Template.args({
    color: 'orange',
    icon: 'clock',
    interval: 5,
}).build(args => `<x-notification ${toProps(args)}>
	<h4>With interval</h4>
	<p>This message will hide in 5 seconds.</p>
</x-notification>`);
export const Service = Template.args({}).build(args => `<div ${toProps(args)} class="d-block" style="max-width: 300px">
	<x-button block class="mb-2" onclick="notification('A simple notification')" color="primary">notification('...')</x-button>
	<x-button block class="mb-2" onclick="notification.success('A success style notification')" color="primary">notification.success(...)</x-button>
	<x-button block class="mb-2" onclick="notification.fail('A error or fail style notification')" color="primary">notification.fail(...)</x-button>
	<x-button block class="mb-2" onclick="notification({
		message: 'A timed notification',
		interval: 5,
		color: 'purple',
		icon: 'clock',
		position: 'bottom',
	})" color="primary">notification({...})</x-button>
</div>`);
