import Builder, { toProps } from "../../utils/builder";
import { MockData } from "./playground.mock";
export default {
    title: 'Components/Gallery',
    component: 'x-gallery',
    parameters: {
        mockData: MockData,
    },
};
const Template = new Builder(args => `<div>
	<x-button onclick="query('test').load()" color="primary">x-gallery.load(...)</x-button>
	<x-gallery ref="test" ${toProps(args)}></x-gallery>
	<img alt="Cropped Result" style="margin-top: 2rem; border: 1px solid #EEE; border-radius: 6px; box-shadow: 0 0 16px rgba(0,0,0,0.2); min-width: 150px; min-height: 150px; display: none">
</div>
<script>
	document.addEventListener('DOMContentLoaded', () => {
		const gallery = query('test');

		if (gallery) {
			gallery.addEventListener('selected', e => {
				query('img').src = e.detail.url;
				query('img').style.display = 'block';
			});
		}
	});
</script>`);
export const Simple = Template.args({}).build();
