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,
} from "@wordpress/block-editor";

import { ToolbarButton, ToggleControl, PanelBody } from "@wordpress/components";

export default function Edit({ attributes, setAttributes }) {
	const { title, iconName, hasTitle } = attributes;

	const handleIconChange = (newIconName) => {
		setAttributes({ iconName: newIconName });
	};
	function getIconPicture() {
		switch (iconName) {
			case "key":
				return keyIcon;

			case "chain":
				return chainIcon;

			case "house":
				return houseIcon;

			case "bulb":
				return bulbIcon;
		}
	}
	function getDashiconSymbol() {
		switch (iconName) {
			case "key":
				return "admin-network";

			case "chain":
				return "admin-links";

			case "house":
				return "admin-home";

			case "bulb":
				return "lightbulb";
		}
	}
	function onHasTitleChange() {
		setAttributes({
			hasTitle: !hasTitle,
			title: undefined,
		});
	}

	let iconPicture = getIconPicture();
	let iconDashiconSymbol = getDashiconSymbol();

	return (
		<>
			<InspectorControls>
				<PanelBody
					title={__("Titre", "homegrade-blocks__texte-fonctionnel")}
					initialOpen={true}
				>
					<ToggleControl
						label="Afficher le titre"
						checked={hasTitle}
						onChange={onHasTitleChange}
					/>
				</PanelBody>
			</InspectorControls>
			<BlockControls>
				<ToolbarButton
					title={"Clé"}
					icon={"admin-network"}
					isActive={iconName === "key"}
					onClick={() => handleIconChange("key")}
				/>
				<ToolbarButton
					title={"Lien"}
					icon={"admin-links"}
					isActive={iconName === "chain"}
					onClick={() => handleIconChange("chain")}
				/>
				<ToolbarButton
					title={"Homegrade"}
					icon={"admin-home"}
					isActive={iconName === "house"}
					onClick={() => handleIconChange("house")}
				/>
				<ToolbarButton
					title={"Inspiration"}
					icon={"lightbulb"}
					isActive={iconName === "bulb"}
					onClick={() => handleIconChange("bulb")}
				/>
			</BlockControls>
			<section
				{...useBlockProps({
					className: `homegrade-blocks-highlight`,
				})}
			>
				{hasTitle && (
					<div className="homegrade-blocks-highlight__titling">
						<div className="icon">
							<img src={iconPicture} alt="" />
						</div>
						<RichText
							className="homegrade-blocks-highlight__block-title"
							onChange={(value) => setAttributes({ title: value })}
							value={title}
							placeholder={__(
								"Insérez un titre",
								"homegrade-blocks__texte-fonctionnel"
							)}
							tagName="h3"
							allowedFormats={[]}
						/>
					</div>
				)}

				<InnerBlocks
					allowedBlocks={[
						"core/paragraph",
						"core/list",
						"core/buttons",
						"core/button",
						"core/colums",
						"core/colum",
						"homegrade-content-blocks/content-heading",
					]}
					template={[["core/paragraph"]]}
				/>
			</section>
		</>
	);
}