import { __ } from "@wordpress/i18n";
import {
	useBlockProps,
	RichText,
	InspectorControls,
	__experimentalLinkControl as LinkControl,
	useSetting,
} from "@wordpress/block-editor";
import { PanelBody } from "@wordpress/components";
import "./editor.scss";
import { BlockControls, AlignmentToolbar } from "@wordpress/block-editor";
import { ColorPalette, PanelRow } from "@wordpress/components";
import { Tip } from "@wordpress/components";
import { ReactComponent as ArrowIcon } from "./img/carhop-fleche-lien-externe-full.svg";
import { ReactComponent as AnchorIcon } from "./img/carhop-fleche-ancre-page.svg";

export default function Edit({ attributes, setAttributes }) {
	const { color, link } = attributes;
	const colors = useSetting("color.palette.theme");
	const isHashLink = typeof link?.url === "string" && link.url.startsWith("#");

	function handleColorChange(value) {
		setAttributes({ color: value });
	}

	console.log(attributes);
	console.log(link);

	function handleLinkChange(newLink) {
		if (!newLink) {
			setAttributes({ link: undefined });
			return;
		}

		if (newLink.url) {
			newLink.title = newLink.url;
		}

		console.log(newLink);
		setAttributes({ link: newLink });
	}
	return (
		<>
			<BlockControls>
				<AlignmentToolbar
					value={attributes.align}
					onChange={(value) => setAttributes({ align: value })}
				/>
			</BlockControls>
			<InspectorControls>
				<PanelBody title="Lien" initialOpen={true}>
					<div>
						<LinkControl
							key="link-control"
							value={attributes.link}
							label="Lien"
							onSelect={(value) => {
								console.log("onSelect");
								console.log(value);
							}}
							onChange={(newlink) => {
								handleLinkChange(newlink);
							}}
						/>
					</div>

					<PanelBody title="Couleur" initialOpen={true}>
						<PanelRow>
							<ColorPalette
								value={color}
								onChange={(value) => {
									handleColorChange(value);
								}}
								colors={colors}
								disableCustomColors={true}
							/>
						</PanelRow>
					</PanelBody>
				</PanelBody>
			</InspectorControls>
			<div
				{...useBlockProps({
					className: `cta align--${attributes.align}${
						isHashLink ? " cta--hash-link" : ""
					}`,
					style: {
						"--cta-current-color": color,
					},
				})}
			>
				<RichText
					tagName="a"
					placeholder="Ajouter un lien"
					value={attributes.text}
					onChange={(text) => setAttributes({ text })}
					allowedFormats={[]}
				/>

				{isHashLink ? (
					<AnchorIcon style={{ color }} />
				) : (
					<ArrowIcon style={{ color }} />
				)}
			</div>
		</>
	);
}