import { __ } from "@wordpress/i18n";
import "./editor.scss";
import ImageMediaPlaceholder from "../../_components/ImageMediaPlaceholder";
import Image from "../../_components/Image";
import ImagePanelBody from "../../_components/ImagePanelBody";
import {
	InspectorControls,
	useBlockProps,
	MediaPlaceholder,
	MediaReplaceFlow,
	__experimentalLinkControl as LinkControl,
} from "@wordpress/block-editor";

import { PanelBody, Button, TextControl, Tip } from "@wordpress/components";
import { trash, wordpress } from "@wordpress/icons";
export default function Edit({ attributes, setAttributes }) {
	let { partnerLogoUrl, partnerLogoAlt, partnerLogoId, partnerWebsite } =
		attributes;
	function setPartnerLogoAttributes(logo) {
		setAttributes({
			partnerLogoId: logo.id,
			partnerLogoAlt: logo.alt,
			partnerLogoUrl: logo.url,
		});
	}

	function removePartnerLogoAttributes() {
		setAttributes({
			partnerLogoId: null,
			partnerLogoAlt: null,
			partnerLogoUrl: null,
		});
	}
	function onChangepartnerWebsite(partnerWebsite) {
		setAttributes({ partnerWebsite });
	}
	return (
		<>
			<InspectorControls>
				<PanelBody
					className="homegrade-blocks-components-image__panel-body  homegrade-blocks__panel-body homegrade-blocks-components-icon__panel-body"
					title={__("Partenaire", "homegrade-blocks")}
				>
					{partnerLogoUrl && (
						<img
							className="partner-preview"
							src={partnerLogoUrl}
							alt={partnerLogoAlt}
						/>
					)}
					<div className="media-replace-container">
						<MediaReplaceFlow
							label={__("Source", "homegrade-blocks")}
							mediaId={partnerLogoId}
							mediaUrl={partnerLogoUrl}
							allowedTypes={["image"]}
							accept="image/*"
							onSelect={setPartnerLogoAttributes}
							name={
								!partnerLogoUrl
									? __("Ajouter", "homegrade-blocks")
									: __("Remplacer", "homegrade-blocks")
							}
						/>
						{partnerLogoUrl && (
							<>
								<Button
									className="custom-flow-button"
									variant="primary"
									icon={trash}
									label="Supprimer"
									onClick={removePartnerLogoAttributes}
								/>
							</>
						)}
					</div>
					<TextControl
						title="websiteLink"
						onChange={onChangepartnerWebsite}
						value={partnerWebsite}
						placeholder="http://www.exemple.com"
					/>
					<Tip>Insérez l'adresse complète http://</Tip>
				</PanelBody>
			</InspectorControls>
			{!partnerLogoUrl && (
				<MediaPlaceholder
					accept="image/*"
					allowedTypes={["image"]}
					onSelect={setPartnerLogoAttributes}
					multiple={false}
					handleUpload={true}
				/>
			)}
			<div
				{...useBlockProps({
					className: `homegrade-blocks-partner-logo`,
				})}
			>
				{partnerLogoUrl && (
					<img
						className="homegrade-blocks-partner-logo__logo"
						src={partnerLogoUrl}
						alt={partnerLogoAlt}
					/>
				)}
			</div>
		</>
	);
}