import type { UmbInputDropzoneElement } from './input-dropzone.element.js';
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import { html } from '@umbraco-cms/backoffice/external/lit';

import './input-dropzone.element.js';

const meta: Meta<UmbInputDropzoneElement> = {
	id: 'umb-input-dropzone',
	title: 'Entity/Media/Components/Input Dropzone',
	component: 'umb-input-dropzone',
	args: {
		disabled: false,
		accept: '',
	},
	decorators: [(Story) => html`<div style="width: 300px">${Story()}</div>`],
	parameters: {
		layout: 'centered',
		actions: {
			handles: ['submitted', 'change'],
		},
	},
};

export default meta;

type Story = StoryObj<UmbInputDropzoneElement>;

export const Docs: Story = {};

export const WithDisabled: Story = {
	args: {
		disabled: true,
	},
};

export const WithAccept: Story = {
	args: {
		accept: 'jpg,png',
	},
	parameters: {
		docs: {
			description: {
				story: 'This is a dropzone with an accept attribute set to "jpg,png".',
			},
		},
	},
};

export const Standalone: Story = {
	args: {
		standalone: true,
	},
};

export const WithDefaultSlot: Story = {
	render: () =>
		html`<umb-input-dropzone>
			<div>Custom slot</div>
		</umb-input-dropzone>`,
};

export const WithTextSlot: Story = {
	render: () => html`<umb-input-dropzone><div slot="text">Drop your files here</div></umb-input-dropzone>`,
};
