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";

export default function Edit({ attributes, setAttributes }) {
	const { color, link } = attributes;
	const colors = useSetting("color.palette.theme");

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

	return (
		<>
			<BlockControls>
				<AlignmentToolbar
					value={attributes.align}
					onChange={(value) => setAttributes({ align: value })}
				/>
			</BlockControls>
			<InspectorControls>
				<PanelBody title="Lien" initialOpen={true}>
					<div>
						<LinkControl
							value={attributes.link}
							onChange={(value) => {
								setAttributes({ link: value });
							}}
						/>
					</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}`,
					style: {
						"--cta-current-color": color,
					},
				})}
			>
				<RichText
					tagName="a"
					placeholder="Ajouter un lien"
					value={attributes.text}
					onChange={(text) => setAttributes({ text })}
					allowedFormats={[]}
				/>
				{/* <div className="icon">
					<ArrowIcon style={{ "--cta-current-color": color }} />
				</div> */}
			</div>
		</>
	);
}