import {html} from "lit"
import {shadowElement, useHost, useStyles} from "@e280/sly"

import styleCss from "./style.css.js"
import themeCss from "../../theme.css.js"

import {findLocalGroup} from "../../utils/find-local-group.js"

export const QuayDropzone = shadowElement(() => {
	useStyles(themeCss, styleCss)
	const host = useHost()

	const group = findLocalGroup(host)
	const {dropzone, config: {root}} = group

	return html`
		<div class="dropzone" ?data-hovering=${dropzone.hovering}>
			<input
				type="file"
				class="dz-input"
				@change=${(e: DragEvent) => dropzone.change(e, root)}
				@drop=${(e: DragEvent) => dropzone.drop(e, root)}
				@dragover=${(e: DragEvent) => dropzone.dragover(e, root)}
				@dragenter=${(e: DragEvent) => dropzone.dragenter(e, root)}
				@dragleave=${dropzone.dragleave}
			>
			<div class=dz-info>
				<sl-icon name="upload"></sl-icon>
				Drop files here
			</div>
		</div>
	`
})