import { InspectorControls } from "@wordpress/block-editor";
import {
	PanelBody,
	ToggleControl,
	Button,
	TextControl,
} from "@wordpress/components";
import { useState } from "@wordpress/element";
import { MediaUpload, MediaUploadCheck } from "@wordpress/block-editor";

const SidePanel = ({ attributes, setAttributes }) => {
	const { loop, images } = attributes;
	const [imageUrl, setImageUrl] = useState("");

	const handleLoopToggle = () => {
		setAttributes({ loop: !loop });
	};

	const addImage = () => {
		if (imageUrl) {
			const newImages = [...(images || []), { url: imageUrl }];
			setAttributes({ images: newImages });
			setImageUrl("");
		}
	};

	const removeImage = (index) => {
		const newImages = [...(images || [])];
		newImages.splice(index, 1);
		setAttributes({ images: newImages });
	};

	const onSelectImage = (media) => {
		const newImages = [
			...(images || []),
			{
				id: media.id,
				url: media.url,
				alt: media.alt || "",
			},
		];
		setAttributes({ images: newImages });
	};

	const moveImageUp = (index) => {
		if (index === 0) return;
		const newImages = [...(images || [])];
		const temp = newImages[index];
		newImages[index] = newImages[index - 1];
		newImages[index - 1] = temp;
		setAttributes({ images: newImages });
	};

	const moveImageDown = (index) => {
		if (!images || index === images.length - 1) return;
		const newImages = [...(images || [])];
		const temp = newImages[index];
		newImages[index] = newImages[index + 1];
		newImages[index + 1] = temp;
		setAttributes({ images: newImages });
	};

	return (
		<>
			<InspectorControls>
				<PanelBody title={"Image layers settings"} initialOpen={true}>
					<ToggleControl
						label="Loop animation"
						help={
							loop
								? "Layers will come in and out continuously."
								: "Layers will appear on-by-one."
						}
						checked={!!loop}
						onChange={handleLoopToggle}
					/>

					<div style={{ marginTop: "20px" }}>
						<h3>Slider Images</h3>

						<MediaUploadCheck>
							<MediaUpload
								onSelect={onSelectImage}
								allowedTypes={["image"]}
								multiple={false}
								render={({ open }) => (
									<Button onClick={open} variant="primary">
										Add Image from Media Library
									</Button>
								)}
							/>
						</MediaUploadCheck>

						<div style={{ marginTop: "15px" }}>
							{images && images.length > 0 ? (
								<ul style={{ margin: 0, padding: 0 }}>
									{images.map((image, index) => (
										<li
											key={index}
											style={{
												display: "flex",
												alignItems: "center",
												marginBottom: "10px",
												padding: "8px",
												border: "1px solid #ddd",
												borderRadius: "4px",
											}}
										>
											<div
												style={{
													display: "flex",
													flexDirection: "column",
													marginRight: "10px",
												}}
											>
												<Button
													icon="arrow-up-alt2"
													onClick={() => moveImageUp(index)}
													disabled={index === 0}
													label="Move up"
												/>
												<Button
													icon="arrow-down-alt2"
													onClick={() => moveImageDown(index)}
													disabled={!images || index === images.length - 1}
													label="Move down"
													style={{ marginBottom: "2px" }}
												/>
											</div>

											<img
												src={image.url}
												alt={image.alt || ""}
												style={{
													width: "50px",
													height: "50px",
													objectFit: "cover",
													marginRight: "10px",
												}}
											/>
											<div style={{ flex: 1, overflow: "hidden" }}>
												<p
													style={{
														margin: 0,
														textOverflow: "ellipsis",
														overflow: "hidden",
													}}
												>
													{image.url.split("/").pop()}
												</p>
											</div>
											<Button
												isDestructive
												onClick={() => removeImage(index)}
												icon="trash"
												label="Remove image"
											/>
										</li>
									))}
								</ul>
							) : (
								<p>No images added yet.</p>
							)}
						</div>
					</div>
				</PanelBody>
			</InspectorControls>
		</>
	);
};

export default SidePanel;
