import { __ } from '@wordpress/i18n';
import './editor.scss';

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,
	RadioControl,
} from '@wordpress/components';

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

	const ICON_FILES = {
		key: 'icon_key.svg',
		chain: 'icon_chain.svg',
		house: 'icon_house.svg',
		bulb: 'icon_bulb.svg',
		warning: 'icon_warning.svg',
		acoustic: 'icon_acoustic.svg',
		documentation: 'icon_documentation.svg',
		notification: 'icon_notification.svg',
		search: 'icon_search.svg',
		info: 'icon_info.svg',
		tip: 'icon_tip.svg',
		euro: 'icon_euro.svg',
	};
	const getIconUrl = (iconName) => {
		if (!iconName) return '';
		return HOMEGRADE_HIGHLIGHT.iconsBaseUrl + ICON_FILES[iconName];
	};

	function onIconChange(newIconName) {
		const newIconUrl = getIconUrl(newIconName);
		setAttributes({ iconName: newIconName, iconUrl: newIconUrl });
	}
	function onTitleChange(title) {
		setAttributes({ title });
	}
	function onHasTitleChange() {
		setAttributes({
			hasTitle: !hasTitle,
			title: undefined,
		});
	}
	function onhasIconChange() {
		setAttributes({
			hasIcon: !hasIcon,
		});
	}
	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,
		});
	}

	function handleIconPositionChange(newPosition) {
		setAttributes({ iconPosition: newPosition });
	}

	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="Afficher une Icone" checked={hasIcon} onChange={onhasIconChange} />

					{hasIcon && (
						<RadioControl
							className="homegrade-blocks-highlight__icon-position"
							label="Position de l'icone"
							onChange={handleIconPositionChange}
							options={[
								{
									label: 'Avant le titre',
									value: 'top',
									description: 'Seulement lorsque le titre est ACTIVÉ',
								},
								{
									label: 'Coté',
									value: 'side',
									disabled: hasTitle,
									description: 'Seulement lorsque le titre est DÉSACTIVÉ',
								},
							]}
							selected={iconPosition}
						/>
					)}
					<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')}
				/>
				<ToolbarButton
					title={'Attention'}
					icon={'warning'}
					isActive={iconName === 'warning'}
					onClick={() => onIconChange('warning')}
				/>
				<ToolbarButton
					title={'Acoustique'}
					icon={'controls-volumeon'}
					isActive={iconName === 'acoustic'}
					onClick={() => onIconChange('acoustic')}
				/>
				<ToolbarButton
					title={'Documentation'}
					icon={'book-alt'}
					isActive={iconName === 'documentation'}
					onClick={() => onIconChange('documentation')}
				/>
				<ToolbarButton
					title={'Recherche'}
					icon={'search'}
					isActive={iconName === 'search'}
					onClick={() => onIconChange('search')}
				/>
				<ToolbarButton
					title={'Notification'}
					icon={'bell'}
					isActive={iconName === 'notification'}
					onClick={() => onIconChange('notification')}
				/>
				<ToolbarButton
					title={'Info'}
					icon={'info'}
					isActive={iconName === 'info'}
					onClick={() => onIconChange('info')}
				/>
				<ToolbarButton
					title={'Euro'}
					icon={'money-alt'}
					isActive={iconName === 'euro'}
					onClick={() => onIconChange('euro')}
				/>
				<ToolbarButton
					title={'Astuce'}
					icon={'thumbs-up'}
					isActive={iconName === 'tip'}
					onClick={() => onIconChange('tip')}
				/>
			</BlockControls>
			<section
				{...useBlockProps({
					className: `homegrade-blocks-highlight ${
						variant ? `homegrade-blocks-highlight--${variant}` : ''
					}`,
				})}
			>
				{hasTitle && (
					<div
						className={`homegrade-blocks-highlight__titling ${
							!hasIcon ? 'homegrade-blocks-highlight__titling--has-no-icon' : ''
						}`}
					>
						{hasIcon && iconPosition === 'top' && (
							<div className="icon">
								<img className="icon__image" src={iconUrl} 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">
					{hasIcon && iconPosition === 'side' && !hasTitle && (
						<div className="icon">
							<img className="icon__image" src={iconUrl} alt="" />
						</div>
					)}

					<div className="homegrade-blocks-highlight__content__innerblocks">
						<InnerBlocks
							allowedBlocks={[
								'core/paragraph',
								'core/list',
								'core/buttons',
								'core/button',
								'core/columns',
								'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>
		</>
	);
}
