import { __ } from '@wordpress/i18n';
import { PanelColorSettings } from '@wordpress/block-editor';
import { TextControl, ToggleControl } from '@wordpress/components';
import IconSettings from '../../../components/settings/IconSettings';

const PLAY_ICON_ATTRIBUTE_MAP = {
	iconType: 'playIconType',
	iconName: 'playIconName',
	iconCategory: 'playIconCategory',
	customIcon: 'playCustomIcon',
	iconSvg: 'playIconSvg',
	iconColor: 'playIconColor',
	iconColor__hover: 'playIconColor__hover',
};

const getPlayIconAttributes = ( attributes ) => ( {
	iconType: attributes.playIconType || '',
	iconName: attributes.playIconName || '',
	iconCategory: attributes.playIconCategory || '',
	customIcon: attributes.playCustomIcon || '',
	iconSvg: attributes.playIconSvg || '',
	iconColor: attributes.playIconColor || '',
	iconColor__hover: attributes.playIconColor__hover || '',
	iconLocation: 'before',
} );

const mapPlayIconAttributes = ( nextAttributes ) =>
	Object.entries( nextAttributes ).reduce( ( mapped, [ key, value ] ) => {
		const attrName = PLAY_ICON_ATTRIBUTE_MAP[ key ];

		if ( attrName ) {
			mapped[ attrName ] = value;
		}

		return mapped;
	}, {} );

export default function PlayOverlayControls( { attributes, setAttributes } ) {
	const {
		customPlayOverlay,
		hideNativeControlsUntilPlay,
		controls,
		playButtonLabel,
		playOverlayBackground,
		playButtonBackground,
		playButtonColor,
		playButtonSize,
		playIconSize,
		playButtonBorderRadius,
		playOverlayZIndex,
		playButtonZIndex,
	} = attributes;

	const updatePlayIconAttributes = ( nextAttributes ) => {
		const mappedAttributes = mapPlayIconAttributes( nextAttributes );

		if ( Object.keys( mappedAttributes ).length ) {
			setAttributes( mappedAttributes );
		}
	};

	return (
		<div className="axcelersblocks-settings-section">
			<ToggleControl
				label={ __( 'Custom play overlay', 'axcelersblocks' ) }
				checked={ !! customPlayOverlay }
				onChange={ ( value ) => setAttributes( { customPlayOverlay: !! value } ) }
				help={ __( 'Show a styled overlay and custom play control before playback starts.', 'axcelersblocks' ) }
			/>

			{ !! customPlayOverlay && (
				<>
					<ToggleControl
						label={ __( 'Hide native controls until play', 'axcelersblocks' ) }
						checked={ !! hideNativeControlsUntilPlay }
						disabled={ controls === false }
						onChange={ ( value ) => setAttributes( { hideNativeControlsUntilPlay: !! value } ) }
						help={
							controls === false
								? __( 'Enable native controls first to reveal them after the custom play click.', 'axcelersblocks' )
								: __( 'Native controls are added after the custom play control is clicked.', 'axcelersblocks' )
						}
					/>

					<TextControl
						label={ __( 'Play label', 'axcelersblocks' ) }
						value={ playButtonLabel || '' }
						onChange={ ( value ) => setAttributes( { playButtonLabel: value } ) }
						placeholder={ __( 'Play video', 'axcelersblocks' ) }
					/>

					<hr className="axcelersblocks-divider" />

					<h4 className="axcelersblocks-settings-subtitle">{ __( 'Play Icon', 'axcelersblocks' ) }</h4>
					<IconSettings
						attributes={ getPlayIconAttributes( attributes ) }
						setAttributes={ updatePlayIconAttributes }
						showPosition={ false }
						showColorControls
						resetMode="selection"
						browseButtonLabel={ __( 'Browse Play Icon', 'axcelersblocks' ) }
						uploadButtonLabel={ __( 'Upload Play SVG', 'axcelersblocks' ) }
						helpText={ __( 'Choose a library icon or upload a custom SVG for the play control.', 'axcelersblocks' ) }
					/>

					<hr className="axcelersblocks-divider" />

					<PanelColorSettings
						title={ __( 'Overlay Colors', 'axcelersblocks' ) }
						initialOpen={ false }
						colorSettings={ [
							{
								value: playOverlayBackground,
								onChange: ( color ) => setAttributes( { playOverlayBackground: color || '' } ),
								label: __( 'Overlay background', 'axcelersblocks' ),
							},
							{
								value: playButtonBackground,
								onChange: ( color ) => setAttributes( { playButtonBackground: color || '' } ),
								label: __( 'Button background', 'axcelersblocks' ),
							},
							{
								value: playButtonColor,
								onChange: ( color ) => setAttributes( { playButtonColor: color || '' } ),
								label: __( 'Button color', 'axcelersblocks' ),
							},
						] }
					/>

					<TextControl
						label={ __( 'Button size', 'axcelersblocks' ) }
						value={ playButtonSize || '' }
						onChange={ ( value ) => setAttributes( { playButtonSize: value } ) }
						placeholder="64px"
					/>
					<TextControl
						label={ __( 'Icon size', 'axcelersblocks' ) }
						value={ playIconSize || '' }
						onChange={ ( value ) => setAttributes( { playIconSize: value } ) }
						placeholder="28px"
					/>
					<TextControl
						label={ __( 'Button radius', 'axcelersblocks' ) }
						value={ playButtonBorderRadius || '' }
						onChange={ ( value ) => setAttributes( { playButtonBorderRadius: value } ) }
						placeholder="999px"
					/>
					<TextControl
						label={ __( 'Overlay z-index', 'axcelersblocks' ) }
						value={ playOverlayZIndex || '' }
						onChange={ ( value ) => setAttributes( { playOverlayZIndex: value } ) }
						placeholder="2"
					/>
					<TextControl
						label={ __( 'Button z-index', 'axcelersblocks' ) }
						value={ playButtonZIndex || '' }
						onChange={ ( value ) => setAttributes( { playButtonZIndex: value } ) }
						placeholder="3"
					/>
				</>
			) }
		</div>
	);
}
