import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Elements/Modal',
    component: 'x-modal',
};
const Template = new Builder(args => `<div class="buttons-group">
		<x-button color="primary" onclick="query('test').open()">Show Modal</x-button>
		<x-modal ref="test" ${toProps(args)}>
			<x-card>Lorem ipsum rapem</x-card>
		</x-modal>
	</div>`);
export const Simple = Template.args({}).build();
export const WithInterval = Template.args({
    interval: 3,
}).build();
export const Loading = Template.args({
    loading: true,
}).build();
export const WithCard = new Builder(args => `<div class="buttons-group">
	<x-button color="primary" onclick="query('test').open()">Show Modal</x-button>
	<x-modal ref="test" ${toProps(args)}>
		<x-card icon="user" icon-color="primary">
			<div class="form-group">
				<legend>
					<strong>Lorem</strong>
				</legend>
				<p style="opacity:0.8">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro illum vitae tenetur blanditiis voluptatem qui quibusdam rem provident animi veniam facere fugit, est quam excepturi ducimus nam, ad fugiat nostrum!</p>
			</div>

			<div class="form-group">
				<autocomplete-field label="Test" placeholder="Select option" :autocomplete-values="['Hello','World']"></autocomplete-field>
			</div>

			<div class="form-group">
				<dropdown-field value="Testing 1" :options="['Testing 1','Testing 2','Testing 3','Testing 4','Testing 5']"></dropdown-field>
			</div>

			<div slot="footer">
				<span class="text-muted"><i class="icon-clock"></i> 6 minutes ago</span>
				<a href="javascript:;" class="card-link"><i class="icon-right"></i> Go to action</a>
			</div>
		</x-card>
	</x-modal>
</div>`)
    .args({})
    .build();
