import { useSelect, dispatch } from '@wordpress/data';
import {useState, createElement} from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { useBlockProps, InnerBlocks, InspectorControls } from "@wordpress/block-editor";
import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
import {  getSaveElement, createBlock } from '@wordpress/blocks';

import "./editor.scss";

import Orbiter from './orbiter.js';

export default function Edit( { attributes, setAttributes, clientId }) {
	const { innerBlocks } = useSelect(select => select('core/block-editor').getBlock(clientId));

	const [count, setCount] = useState(innerBlocks.length);

	const onCountChange = (value) => {
		if (value > count) {
			const orbiter = createBlock('red-block/red-orbiter');
			const index = count;
			dispatch('core/editor').insertBlock(orbiter, index, clientId);
		}
		setCount(value);
	}

	const viewList = innerBlocks.map(block => {
		let primary = null;
		let secondary = null;

		if(block.innerBlocks.length > 0) {
			const {name, attributes, innerBlocks} = block.innerBlocks[0];
			const element = getSaveElement( name, attributes, innerBlocks );
			primary = element;
		}

		if(block.innerBlocks.length > 1) {
			const {name, attributes, innerBlocks} = block.innerBlocks[1];
			const element = getSaveElement( name, attributes, innerBlocks );
			secondary = element;
		}

		return (
			<Orbiter primary={primary} secondary={secondary}/>
		)
	});

	return (
		<>
			<InspectorControls>
				<div>
					<NumberControl
            value={ count }
						min={1}
						onChange={ onCountChange }
					/>
				</div>
			</InspectorControls>
			<div {...useBlockProps()}>

				<ul className={`orbiters clockwise count-${count}`}>{viewList}</ul>

				<div className="inner-content">
					<div className="image-hover">
						<img
							className="img"
							src="https://via.placeholder.com/256x256/999/333"
						/>
						<img
							className="img"
							src="https://via.placeholder.com/256x256/666/ccc"
						/>
					</div>
				</div>
			</div>

			<div class="block-list">
				<InnerBlocks />
			</div>
		</>
	);
}