import { InspectorControls, MediaPlaceholder } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";

import {
	__experimentalNumberControl as NumberControl,
	Button,
	ToggleControl,
	Panel,
	PanelBody,
	PanelRow,
} from "@wordpress/components";

export default function Controls({
	attributes,
	setAttributes,
	innerBlocks,
	onCountChange,
	isAnimating,
	setIsAnimating,
}) {
	return (
		<InspectorControls key="setting">
			<div id="red-orbital-controls">
				<Panel>
					<PanelBody title="Settings" initialOpen={true}>
						<PanelRow>
							<legend className="blocks-base-control__label">
								{__("Orbital count", "red-orbital")}
							</legend>
							<NumberControl
								value={innerBlocks.length}
								min={1}
								max={12}
								onChange={onCountChange}
							/>
						</PanelRow>

						<PanelRow className="row-inner-imgs">
							<h2>Inner Images</h2>
						</PanelRow>

						<PanelRow>
							<MediaPlaceholder
								onSelect={(img) => {
									setAttributes({ imgUrl: img.url });
								}}
								allowedTypes={["image"]}
								multiple={false}
								className="img-selector"
								mediaPreview={
									attributes.imgUrl !== "" ? (
										<div>
											<img src={attributes.imgUrl} alt="" />
											<Button
												onClick={() => {
													setAttributes({ imgUrl: "" });
												}}
												isSmall={true}
												isDestructive={true}
												icon="dismiss"
												label="Remove"
												className="remove-img"
											/>
										</div>
									) : (
										<p>No image selected.</p>
									)
								}
							/>
						</PanelRow>

						<PanelRow>
							<MediaPlaceholder
								onSelect={(img) => {
									setAttributes({ imgUrlHover: img.url });
								}}
								allowedTypes={["image"]}
								multiple={false}
								className="img-selector"
								mediaPreview={
									attributes.imgUrlHover !== "" ? (
										<div>
											<img src={attributes.imgUrlHover} alt="" />
											<Button
												onClick={() => {
													setAttributes({ imgUrlHover: "" });
												}}
												icon="dismiss"
												label="Remove"
												isSmall={true}
												isDestructive={true}
												className="remove-img"
											/>
										</div>
									) : (
										<p>No image selected.</p>
									)
								}
							/>
						</PanelRow>
					</PanelBody>
				</Panel>
				<Panel>
					<PanelBody title="View Controls" initialOpen={true}>
						<PanelRow>
							<ToggleControl
								label="Play"
								checked={isAnimating}
								onChange={() => {
									setIsAnimating((state) => !state);
								}}
							/>
						</PanelRow>
					</PanelBody>
				</Panel>
			</div>
		</InspectorControls>
	);
}