import {
	InspectorControls,
	MediaUpload,
	MediaUploadCheck,
} from "@wordpress/block-editor";
import {
	PanelBody,
	SelectControl,
	Button,
	TextControl,
	ColorPicker,
} from "@wordpress/components";
import { __ } from "@wordpress/i18n";

const SidePanel = ({ attributes, setAttributes }) => {
	const {
		backgroundType,
		backgroundColor,
		image,
		video,
		videoUrl,
		videoPoster,
	} = attributes;

	const onSelectImage = (media) => {
		setAttributes({
			image: {
				url: media.url,
				alt: media.alt,
				id: media.id,
			},
		});
	};

	const onSelectVideo = (media) => {
		setAttributes({
			video: {
				url: media.url,
				id: media.id,
			},
		});
	};

	const onSelectVideoPoster = (media) => {
		setAttributes({
			videoPoster: {
				url: media.url,
				alt: media.alt,
				id: media.id,
			},
		});
	};

	return (
		<InspectorControls>
			<PanelBody title={__("Background Settings", "orphic-ui")}>
				<SelectControl
					label={__("Background Type", "orphic-ui")}
					value={backgroundType}
					options={[
						{ label: __("Color", "orphic-ui"), value: "color" },
						{ label: __("Image", "orphic-ui"), value: "image" },
						{ label: __("Video", "orphic-ui"), value: "video" },
					]}
					onChange={(value) => setAttributes({ backgroundType: value })}
				/>

				{backgroundType === "color" && (
					<div>
						<p>{__("Background Color", "orphic-ui")}</p>
						<ColorPicker
							color={backgroundColor}
							onChangeComplete={(value) =>
								setAttributes({ backgroundColor: value.hex })
							}
							disableAlpha
						/>
					</div>
				)}

				{backgroundType === "image" && (
					<div>
						<MediaUploadCheck>
							<MediaUpload
								onSelect={onSelectImage}
								allowedTypes={["image"]}
								value={image?.id}
								render={({ open }) => (
									<Button onClick={open} variant="secondary">
										{image?.url
											? __("Replace Image", "orphic-ui")
											: __("Select Image", "orphic-ui")}
									</Button>
								)}
							/>
						</MediaUploadCheck>
						{image?.url && (
							<div style={{ marginTop: "10px" }}>
								<img
									src={image.url}
									alt={image.alt}
									style={{ maxWidth: "100%" }}
								/>
								<Button
									onClick={() =>
										setAttributes({
											image: { url: "", alt: "", id: null },
										})
									}
									variant="link"
									isDestructive
								>
									{__("Remove Image", "orphic-ui")}
								</Button>
							</div>
						)}
					</div>
				)}

				{backgroundType === "video" && (
					<div>
						<MediaUploadCheck>
							<MediaUpload
								onSelect={onSelectVideo}
								allowedTypes={["video"]}
								value={video?.id}
								render={({ open }) => (
									<Button onClick={open} variant="secondary">
										{video?.url
											? __("Replace Video", "orphic-ui")
											: __("Upload Video", "orphic-ui")}
									</Button>
								)}
							/>
						</MediaUploadCheck>
						{video?.url && (
							<Button
								onClick={() =>
									setAttributes({
										video: { url: "", id: null },
									})
								}
								variant="link"
								isDestructive
							>
								{__("Remove Video", "orphic-ui")}
							</Button>
						)}
						<TextControl
							label={__("Or enter video URL", "orphic-ui")}
							value={videoUrl}
							onChange={(value) => setAttributes({ videoUrl: value })}
							help={__("Enter a direct video URL", "orphic-ui")}
						/>

						{/* Contrôles pour l'image poster de la vidéo */}
						<div style={{ marginTop: "20px" }}>
							<p>{__("Video Poster Image", "orphic-ui")}</p>
							<MediaUploadCheck>
								<MediaUpload
									onSelect={onSelectVideoPoster}
									allowedTypes={["image"]}
									value={videoPoster?.id}
									render={({ open }) => (
										<Button onClick={open} variant="secondary">
											{videoPoster?.url
												? __("Replace Poster Image", "orphic-ui")
												: __("Select Poster Image", "orphic-ui")}
										</Button>
									)}
								/>
							</MediaUploadCheck>
							{videoPoster?.url && (
								<div style={{ marginTop: "10px" }}>
									<img
										src={videoPoster.url}
										alt={videoPoster.alt}
										style={{ maxWidth: "100%" }}
									/>
									<Button
										onClick={() =>
											setAttributes({
												videoPoster: { url: "", alt: "", id: null },
											})
										}
										variant="link"
										isDestructive
									>
										{__("Remove Poster Image", "orphic-ui")}
									</Button>
								</div>
							)}
						</div>
					</div>
				)}
			</PanelBody>
		</InspectorControls>
	);
};

export default SidePanel;
