/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
 */
import { __ } from "@wordpress/i18n";
/**
 * 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 } 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";
import { ResizableBox } from "@wordpress/components";

/**
 * 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 }) {
	const desktopHeightInfo = React.useRef();
	const tabletHeightInfo = React.useRef();
	const mobileHeightInfo = React.useRef();
	const [desktopResizeState, setDesktopResizeState] = React.useState(false);
	const [tabletResizeState, setTabletResizeState] = React.useState(false);
	const [mobileResizeState, setMobileResizeState] = React.useState(false);

	return (
		<div {...useBlockProps()}>
			<SidePanel attributes={attributes} setAttributes={setAttributes} />
			<div className="orphic-ui-spacer-responsive">
				<ResizableBox
					enable={{
						bottom: true,
					}}
					size={{
						height: attributes.desktop,
					}}
					onResizeStop={(_, __, ___, delta) => {
						setAttributes({
							desktop: attributes.desktop + delta.height,
						});
						setDesktopResizeState(false);
					}}
					onResize={(_, __, ___, delta) => {
						desktopHeightInfo.current.textContent = `${
							attributes.desktop + delta.height
						}px`;
						setDesktopResizeState(true);
					}}
					className="orphic-ui-spacer-responsive__box"
				>
					<span
						ref={desktopHeightInfo}
						className={`orphic-ui-spacer-responsive__height__info ${
							desktopResizeState ? "active" : ""
						}`}
					>
						{attributes.desktop}px
					</span>
				</ResizableBox>
				<ResizableBox
					enable={{
						bottom: true,
					}}
					size={{
						height: attributes.tablet,
					}}
					onResizeStop={(_, __, ___, delta) => {
						setAttributes({
							tablet: attributes.tablet + delta.height,
						});
						setTabletResizeState(false);
					}}
					onResize={(_, __, ___, delta) => {
						tabletHeightInfo.current.textContent = `${
							attributes.tablet + delta.height
						}px`;
						setTabletResizeState(true);
					}}
					className="orphic-ui-spacer-responsive__box"
				>
					<span
						ref={tabletHeightInfo}
						className={`orphic-ui-spacer-responsive__height__info ${
							tabletResizeState ? "active" : ""
						}`}
					>
						{attributes.tablet}px
					</span>
				</ResizableBox>
				<ResizableBox
					enable={{
						bottom: true,
					}}
					size={{
						height: attributes.mobile,
					}}
					onResizeStop={(_, __, ___, delta) => {
						setAttributes({
							mobile: attributes.mobile + delta.height,
						});
						setMobileResizeState(false);
					}}
					onResize={(_, __, ___, delta) => {
						mobileHeightInfo.current.textContent = `${
							attributes.mobile + delta.height
						}px`;
						setMobileResizeState(true);
					}}
					className="orphic-ui-spacer-responsive__box"
				>
					<span
						ref={mobileHeightInfo}
						className={`orphic-ui-spacer-responsive__height__info ${
							mobileResizeState ? "active" : ""
						}`}
					>
						{attributes.tablet}px
					</span>
				</ResizableBox>
			</div>
		</div>
	);
}
