import { __ } from "@wordpress/i18n";
import "./editor.scss";
import keyIcon from "./img/icon_feather_key.svg";
import chainIcon from "./img/icon_block_chain.svg";
import houseIcon from "./img/icon_house.svg";
import bulbIcon from "./img/icon_bulb.svg";
import {
	RichText,
	useBlockProps,
	BlockControls,
	InnerBlocks,
	InspectorControls,
	MediaReplaceFlow,
} from "@wordpress/block-editor";

import { trash } from "@wordpress/icons";
import {
	Button,
	ToolbarButton,
	PanelBody,
	ToggleControl,
	__experimentalToggleGroupControl as ToggleGroupControl,
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from "@wordpress/components";

export default function Edit({ attributes, setAttributes }) {
	const {
		title,
		iconName,
		hasTitle,
		hasTitleIcon,
		hasLogo,
		variant,
		logoAlt,
		logoId,
		logoUrl,
	} = attributes;

	function getIconPicture() {
		switch (iconName) {
			case "key":
				return keyIcon;

			case "chain":
				return chainIcon;

			case "house":
				return houseIcon;

			case "bulb":
				return bulbIcon;
		}
	}

	function onIconChange(newIconName) {
		setAttributes({ iconName: newIconName });
	}
	function onTitleChange(title) {
		setAttributes({ title });
	}
	function onHasTitleChange() {
		setAttributes({
			hasTitle: !hasTitle,
			title: undefined,
		});
	}
	function onhasTitleIconChange() {
		setAttributes({
			hasTitleIcon: !hasTitleIcon,
		});
	}
	function onVariantChange(variant) {
		setAttributes({ variant });
	}
	function onHasLogoChange() {
		setAttributes({
			hasLogo: !hasLogo,
		});
		if (!hasLogo) {
			removeLogoAttributes();
		}
	}
	function setLogoAttributes(media) {
		setAttributes({
			logoUrl: media.url,
			logoId: media.id,
			logoAlt: media?.alt,
		});
	}
	function removeLogoAttributes() {
		setAttributes({
			logoUrl: null,
			logoId: null,
			logoAlt: null,
		});
	}

	let iconPicture = getIconPicture();

	return (
		<>
			<InspectorControls>
				<PanelBody
					title={__("Variantes", "homegrade-blocks__texte-fonctionnel")}
					initialOpen={true}
				>
					<ToggleGroupControl
						className="homegrade-blocks-highlight__variant"
						isBlock
						onChange={onVariantChange}
						value={variant}
					>
						<ToggleGroupControlOption label="Classique" value="classic" />
						<ToggleGroupControlOption label="Warning" value="warning" />
						<ToggleGroupControlOption label="Gris" value="gray" />
					</ToggleGroupControl>
					<ToggleControl
						label="Afficher le titre"
						checked={hasTitle}
						onChange={onHasTitleChange}
					/>
					<ToggleControl
						label="Icone pour le titre"
						checked={hasTitleIcon}
						onChange={onhasTitleIconChange}
					/>
					<ToggleControl
						label="Attacher un logo"
						checked={hasLogo}
						onChange={onHasLogoChange}
					/>
				</PanelBody>
				{hasLogo && (
					<PanelBody
						className="homegrade-blocks-highlight__panel-body"
						title={__("Logo", "homegrade-blocks")}
					>
						{logoUrl && <img src={logoUrl} alt={logoAlt} />}

						<div className="media-replace-container ">
							<MediaReplaceFlow
								mediaId={logoId}
								mediaUrl={logoUrl}
								allowedTypes={["image"]}
								accept="image/*"
								onSelect={setLogoAttributes}
								name={
									!logoUrl
										? __("Ajouter un Logo", "homegrade-blocks")
										: __("Remplacer", "homegrade-blocks")
								}
							/>
							{logoUrl && (
								<>
									<Button
										className="custom-flow-button"
										variant="primary"
										icon={trash}
										label="Supprimer"
										onClick={removeLogoAttributes}
									/>
								</>
							)}
						</div>
					</PanelBody>
				)}
			</InspectorControls>
			<BlockControls>
				<ToolbarButton
					title={"Clé"}
					icon={"admin-network"}
					isActive={iconName === "key"}
					onClick={() => onIconChange("key")}
				/>
				<ToolbarButton
					title={"Lien"}
					icon={"admin-links"}
					isActive={iconName === "chain"}
					onClick={() => onIconChange("chain")}
				/>
				<ToolbarButton
					title={"Homegrade"}
					icon={"admin-home"}
					isActive={iconName === "house"}
					onClick={() => onIconChange("house")}
				/>
				<ToolbarButton
					title={"Inspiration"}
					icon={"lightbulb"}
					isActive={iconName === "bulb"}
					onClick={() => onIconChange("bulb")}
				/>
			</BlockControls>
			<section
				{...useBlockProps({
					className: `homegrade-blocks-highlight ${
						variant ? `homegrade-blocks-highlight--${variant}` : ""
					}`,
				})}
			>
				{hasTitle && (
					<div
						className={`homegrade-blocks-highlight__titling ${
							!hasTitleIcon
								? "homegrade-blocks-highlight__titling--has-no-icon"
								: ""
						}`}
					>
						{hasTitleIcon && (
							<div className="icon">
								<img src={iconPicture} alt="" />
							</div>
						)}
						<RichText
							className="homegrade-blocks-highlight__block-title"
							onChange={onTitleChange}
							value={title}
							placeholder={__(
								"Insérez un titre",
								"homegrade-blocks__texte-fonctionnel"
							)}
							tagName="h3"
							allowedFormats={[]}
						/>
					</div>
				)}
				<div className="homegrade-blocks-highlight__content">
					<div className="homegrade-blocks-highlight__content__innerblocks">
						<InnerBlocks
							allowedBlocks={[
								"core/paragraph",
								"core/list",
								"core/buttons",
								"core/button",
								"core/colums",
								"core/colum",
								"homegrade-content-blocks/text-image",
								"homegrade-content-blocks/content-heading",
								"homegrade-content-blocks/staff-member",
							]}
							template={[["core/paragraph"]]}
						/>
					</div>
					{hasLogo && (
						<div className="homegrade-blocks-highlight__logo">
							{!logoUrl && (
								<MediaReplaceFlow
									mediaId={logoId}
									mediaUrl={logoUrl}
									allowedTypes={["image"]}
									accept="image/*"
									onSelect={setLogoAttributes}
									name={
										!logoUrl
											? __("Ajouter Logo", "homegrade-blocks")
											: __("Remplacer", "homegrade-blocks")
									}
								/>
							)}
							{logoUrl && <img src={logoUrl} alt={logoAlt} />}
						</div>
					)}
				</div>
			</section>
		</>
	);
}