/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
 */
import { __ } from "@wordpress/i18n";

import { useDispatch, useSelect } from "@wordpress/data";

import { useEffect, useState } from "@wordpress/element";

import { createBlock } from "@wordpress/blocks";

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import "./editor.scss";
import SidePanel from "./side-panel";

const ALLOWED_BLOCKS = ["orphic-ui/hover-highlights2-unit"];
const TEMPLATE = [
	[
		"orphic-ui/hover-highlights2-unit",
		{ placeholder: "Add hover highlight item..." },
	],
];

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {Element} Element to render.
 */
export default function Edit({ attributes, setAttributes, clientId }) {
	const blockProps = useBlockProps();
	const [innerBlocksData, setInnerBlocksData] = useState();

	const { insertBlock } = useDispatch("core/block-editor");

	const { innerBlocks, innerBlocksCount } = useSelect(
		(select) => {
			const { getBlocks, getBlockCount } = select("core/block-editor");
			return {
				innerBlocks: getBlocks(clientId),
				innerBlocksCount: getBlockCount(clientId),
			};
		},
		[clientId],
	);

	const processInnerBlocksData = () => {
		if (innerBlocks && innerBlocks.length > 0) {
			const innerBlocksData = innerBlocks.map((block) => ({
				id: block.clientId,
				name: block.name,
				attributes: block.attributes,
			}));

			return innerBlocksData;
		}
		return [];
	};

	useEffect(() => {
		const processedData = processInnerBlocksData();
		setInnerBlocksData(processedData);
	}, [innerBlocks]);

	const CustomAppender = () => {
		return (
			<div className="custom-appender-wrapper">
				<div
					className="custom-block-appender"
					onClick={() => {
						const newBlock = createBlock("orphic-ui/hover-highlights2-unit");
						insertBlock(newBlock, innerBlocksCount, clientId);
					}}
					variant="primary"
				>
					{__("Add Item", "orphic-ui")}
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
						<path d="M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM240 352c0 8.8 7.2 16 16 16s16-7.2 16-16l0-80 80 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-80 0 0-80c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 80-80 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l80 0 0 80z" />
					</svg>
				</div>
			</div>
		);
	};

	return (
		<div {...blockProps}>
			<SidePanel attributes={attributes} setAttributes={setAttributes} />
			<div className="hover-highlights2-editor">
				<div className="left">
					{innerBlocksData &&
						innerBlocksData.map((data) => (
							<div className="item-data">
								<div className="header">
									<h2>{data.attributes.title || "(Item title)"}</h2>
									<span
										className="hover-highlight-arrow"
										dangerouslySetInnerHTML={{
											__html: attributes.customArrowSvg,
										}}
									/>
								</div>
								<p>{data.attributes.text || "(Item subtitle)"}</p>
							</div>
						))}
				</div>
				<div className="right">
					<InnerBlocks
						allowedBlocks={ALLOWED_BLOCKS}
						template={TEMPLATE}
						templateLock={false}
						renderAppender={CustomAppender}
					/>
				</div>
			</div>
		</div>
	);
}
