import { __ } from "@wordpress/i18n";

import {
	useBlockProps,
	InnerBlocks,
	InspectorControls,
} from "@wordpress/block-editor";
import { useSelect } from "@wordpress/data";
import { ColorPicker } from "@wordpress/components";

import "./editor.scss";

const InnerBlocksWithLimit = ({ clientId, limit = 2, ...rest }) => {
	const { blockCount } = useSelect((select) => ({
		blockCount: select("core/block-editor").getBlockCount(clientId),
	}));

	const blockAppender = () => {
		return blockCount < limit ? <InnerBlocks.DefaultBlockAppender /> : false;
	};

	return <InnerBlocks renderAppender={() => blockAppender()} {...rest} />;
};

export default function Edit({ attributes, setAttributes, clientId }) {
	return (
		<>
			<InspectorControls>
				<ColorPicker
					color={attributes.backgroundColor}
					onChange={(color) => setAttributes({ backgroundColor: color })}
					enableAlpha
					defaultValue="#000"
				/>
			</InspectorControls>

			<div
				{...useBlockProps({
					style: {
						backgroundColor: attributes.backgroundColor,
					},
				})}
			>
				<InnerBlocksWithLimit orientation="horizontal" clientId={clientId} />
			</div>
		</>
	);
}