import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Components/Cropper',
    component: 'x-cropper',
};
const Template = new Builder(args => `<div>
	<x-button onclick="query('test').load({ source: \`/card-\${Math.floor(Math.random() * 3) + 1}.jpeg\` })" color="primary">.load(...)</x-button>
	<x-cropper ref="test" ${toProps(args)}></x-cropper>
	<hr>
	<img alt="Cropped Result" style="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">
	<script>
		document.addEventListener('DOMContentLoaded', () => {
			const cropper = query('test');

			if (cropper) {
				cropper.addEventListener('cropped', e => {
					query('img').src = e.detail.toDataURL();
					query('img').style.display = 'block';
				});
			}
		});
	</script>
</div>`);
export const Simple = Template.args({}).build();
export const WithSizes = Template.args({}).build(args => `<div>
	<x-button onclick="query('test').load({ source: \`/card-\${Math.floor(Math.random() * 3) + 1}.jpeg\`, sizes: [
		{ label: 'Square', width: 200, height: 200 },
		{ label: 'Landscape', width: 200, height: 100 },
		{ label: 'Portrait', width: 100, height: 200 },
	] })" color="primary">.load(...)</x-button>
	<x-cropper ref="test" ${toProps(args)}></x-cropper>
	<hr>
	<img alt="Cropped Result" style="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">
	<script>
		document.addEventListener('DOMContentLoaded', () => {
			const cropper = query('test');

			if (cropper) {
				cropper.addEventListener('cropped', e => {
					query('img').src = e.detail.toDataURL();
					query('img').style.display = 'block';
				});
			}
		});
	</script>
</div>`);
export const WithInput = Template.args({}).build(args => `<div>
	<x-input-image max-width="400px">
		<x-cropper ref="test" ${toProps(args)}></x-cropper>
	</x-input-image>
</div>`);
