import { useDroppable } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { Button } from '@wordpress/components';
import BlockConfigurator from './BlockConfigurator';

function SortableBlock( { block, definition, dispatch } ) {
	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable( {
		id: block.id,
		data: { type: 'canvas-block' },
	} );

	const style = {
		transform: CSS.Transform.toString( transform ),
		transition,
		opacity: isDragging ? 0.5 : 1,
	};

	return (
		<div ref={ setNodeRef } style={ style } className="aic-canvas-block">
			<div className="aic-canvas-block-header">
				<div className="aic-canvas-block-drag" { ...attributes } { ...listeners }>
					<span className={ `dashicons dashicons-${ definition?.icon || 'block-default' }` } />
					<span className="aic-canvas-block-label">{ definition?.label || block.block_type }</span>
				</div>
				<Button
					icon="no-alt"
					isSmall
					isDestructive
					onClick={ () => dispatch( { type: 'REMOVE_BLOCK', payload: block.id } ) }
					label="Remove block"
				/>
			</div>
			<div className="aic-canvas-block-body">
				<BlockConfigurator
					block={ block }
					definition={ definition }
					dispatch={ dispatch }
				/>
			</div>
		</div>
	);
}

export default function BuilderCanvas( { blocks, definitions, dispatch } ) {
	const { setNodeRef, isOver } = useDroppable( { id: 'canvas' } );

	return (
		<div
			ref={ setNodeRef }
			className={ `aic-canvas ${ isOver ? 'aic-canvas--over' : '' }` }
		>
			<h3>Builder Canvas</h3>
			{ blocks.length === 0 ? (
				<div className="aic-canvas-empty">
					<span className="dashicons dashicons-plus-alt2" />
					<p>Drag content blocks here to build your tool</p>
				</div>
			) : (
				<SortableContext
					items={ blocks.map( ( b ) => b.id ) }
					strategy={ verticalListSortingStrategy }
				>
					{ blocks.map( ( block ) => (
						<SortableBlock
							key={ block.id }
							block={ block }
							definition={ definitions[ block.block_type ] }
							dispatch={ dispatch }
						/>
					) ) }
				</SortableContext>
			) }
		</div>
	);
}