import { __ } from "@wordpress/i18n";
import {
	InnerBlocks,
	useBlockProps,
	InspectorControls,
	MediaReplaceFlow,
	MediaPlaceholder,
	useSetting,
} from "@wordpress/block-editor";
import { lock, trash } from "@wordpress/icons";
import { ColorPalette } from "@wordpress/components";
import {
	PanelBody,
	__experimentalToggleGroupControl as ToggleGroupControl,
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
	Button,
	CheckboxControl,
} from "@wordpress/components";

import "./editor.scss";
export default function Edit({ attributes, setAttributes, ...props }) {
	const colors = useSetting("color.palette.theme");
	const {
		disposition,
		coverType,
		coverUrl,
		coverAlt,
		coverId,
		coverSize,
		hasBackgroundColor,
		backgroundColor,
		backgroundOrientation,
		blockWidth,
		textColor,
	} = attributes;

	function onDispositionChange(disposition) {
		setAttributes({ disposition });
	}

	function setCoverAttributes(cover) {
		setAttributes({
			coverId: cover.id,
			coverAlt: cover.alt,
			coverUrl: cover.url,
		});
	}
	function removeCoverAttributes() {
		setAttributes({
			coverId: null,
			coverAlt: null,
			coverUrl: null,
		});
	}
	function onBackgroundColorChange(value) {
		setAttributes({ backgroundColor: value });
	}
	function onHasBackgroundColorChange(value) {
		setAttributes({ hasBackgroundColor: value });
		if (!value) {
			setAttributes({ backgroundColor: null });
		}
	}
	function onCoverTypeChange(value) {
		setAttributes({ coverType: value });
	}

	function onBackgroundOrientationChange(value) {
		setAttributes({ backgroundOrientation: value });
	}
	return (
		<>
			<InspectorControls>
				<PanelBody
					className="deligraph-blocks-components-image__panel-body"
					title={__("Largeur", "deligraph-blocks")}
				>
					<ToggleGroupControl
						className="deligraph-blocks__variant"
						isBlock
						label="Largeur du bloc"
						onChange={(value) => setAttributes({ blockWidth: value })}
						value={blockWidth}
					>
						<ToggleGroupControlOption label="Contenue" value="contained" />
						<ToggleGroupControlOption label="Pleine largeur" value="full" />
					</ToggleGroupControl>
				</PanelBody>
				<PanelBody
					className="deligraph-blocks-components-image__panel-body"
					title={__("Image d'accompagnement", "deligraph-blocks")}
				>
					{coverUrl && <img src={coverUrl} alt={coverAlt} />}
					<div className="media-replace-container">
						<MediaReplaceFlow
							mediaId={coverId}
							mediaUrl={coverUrl}
							allowedTypes={["image"]}
							accept="image/*"
							onSelect={setCoverAttributes}
							name={
								!coverUrl
									? __("Ajouter votre image manuellement", "homegrade-blocks")
									: __("Remplacer", "homegrade-blocks")
							}
						/>
						{coverUrl && (
							<>
								<Button
									className="custom-flow-button"
									variant="primary"
									icon={trash}
									label="Supprimer"
									onClick={removeCoverAttributes}
								/>
							</>
						)}
					</div>

					<ToggleGroupControl
						className="deligraph-blocks__variant"
						isBlock
						label="Type d'image"
						onChange={onCoverTypeChange}
						value={coverType}
					>
						<ToggleGroupControlOption label="Classique" value="classic" />
						<ToggleGroupControlOption label="Encadrée" value="photoframe" />
					</ToggleGroupControl>
					<ToggleGroupControl
						className="deligraph-blocks__variant"
						isBlock
						label="Disposition"
						onChange={onDispositionChange}
						value={disposition}
					>
						<ToggleGroupControlOption label="Gauche" value="left" />
						<ToggleGroupControlOption label="Droite" value="right" />
					</ToggleGroupControl>
					<ToggleGroupControl
						className="deligraph-blocks__variant"
						isBlock
						label="Taille de l'image"
						onChange={(coverSize) => setAttributes({ coverSize })}
						value={coverSize}
					>
						<ToggleGroupControlOption label="Big" value="large" />
						<ToggleGroupControlOption label="Grande" value="grande" />
						<ToggleGroupControlOption label="Moyenne" value="medium" />
						<ToggleGroupControlOption label="Petite" value="small" />
					</ToggleGroupControl>
				</PanelBody>

				<PanelBody
					className="deligraph-blocks-components-image__panel-body"
					title={__("Arrière plan", "deligraph-blocks")}
				>
					<CheckboxControl
						label="Arrière plan coloré"
						checked={hasBackgroundColor}
						onChange={onHasBackgroundColorChange}
					/>
					{hasBackgroundColor && (
						<>
							<ColorPalette
								colors={colors}
								value={backgroundColor}
								onChange={onBackgroundColorChange}
							/>
						</>
					)}
				</PanelBody>

				<PanelBody
					className="deligraph-blocks-components-image__panel-body"
					title={__("Couleur du texte", "deligraph-blocks")}
				>
					<ColorPalette
						colors={colors}
						value={textColor}
						onChange={(value) => setAttributes({ textColor: value })}
					/>
				</PanelBody>
			</InspectorControls>
			<section
				{...useBlockProps({
					className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} 
					${
						blockWidth === "full"
							? "chapter-section--width-full"
							: "chapter-section--width-contained"
					}
					${
						hasBackgroundColor && backgroundColor
							? "chapter-section--has-background"
							: ""
					}`,
					style: {
						"--chapter-section-text-color": textColor ? textColor : "#136f63",
					},
				})}
			>
				{hasBackgroundColor && backgroundColor && (
					<>
						<svg
							className={`chapter-section__background chapter-section__background--${backgroundOrientation}`}
							width="1302"
							height="654"
							viewBox="0 0 1302 654"
							preserveAspectRatio="none"
						>
							<path
								d="M1302 0L0 15.8281V654L1302 642.633L1302 0Z"
								fill={backgroundColor}
							/>
						</svg>
					</>
				)}
				<div className="chapter-section__content">
					<div className="chapter-section__innerblocks">
						<InnerBlocks
							template={[
								[
									"carhop-blocks/heading",
									{
										innerBlocks: [
											[
												"core/heading",
												{
													content: "Un titre précis ",
												},
											],
										],
									},
								],
								[
									"core/paragraph",
									{
										className: "chapter-section__title",
										placeholder: "Chapter Title",
										content:
											"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue augue, sagittis quis mauris in, consequat vehicula est. Aliquam quis nulla ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras bibendum eget lorem eget aliquet. Fusce vel consequat neque. ",
									},
								],
							]}
							allowedBlocks={[
								"core/heading",
								"core/paragraph",
								"core/list",
								"core/button",
								"core/buttons",
								"carhop-blocks/cta",
								"carhop-blocks/heading",
							]}
						/>
					</div>
				</div>
				{coverUrl && (
					<img
						className={`chapter-section__cover chapter-section__cover--${coverSize} chapter-section__cover--${coverType}`}
						src={coverUrl}
						alt={coverAlt}
					/>
				)}
				{!coverUrl && (
					<MediaPlaceholder
						accept="image/*"
						allowedTypes={["image"]}
						onSelect={setCoverAttributes}
						multiple={false}
						handleUpload={true}
					/>
				)}
			</section>
		</>
	);
}