import { __ } from '@wordpress/i18n';
import { Dropdown, Button, ColorPicker, PanelBody } from '@wordpress/components';
import ResponsiveInheritedNotice from '../../controls/ResponsiveInheritedNotice';
import UnitValueControl from '../../controls/UnitValueControl';

export default function TextShadowControl({ activeDevice, effectValues, effect, inheritedEffect = {}, updateDeviceEffect }) {
  const textShadow = effect.textShadow || { xOffset: '', yOffset: '', blurRadius: '', color: '' };
  const inheritedTextShadow = inheritedEffect.textShadow || {};

  const updateTextShadow = (key, value) => {
    updateDeviceEffect('textShadow', { ...textShadow, [key]: value });
  };

  return (
    <PanelBody
			className='effect-child-controls'
      title={
				<span className="axb-title-with-badge">
					{__('Text Shadow', 'axcelersblocks')}
				</span>
			}
      initialOpen={false}
    >
			<div className='two-columns'>
				<UnitValueControl
					label={__('X Offset', 'axcelersblocks')}
					value={textShadow.xOffset || ''}
					onChange={(value) => updateTextShadow('xOffset', value)}
					placeholder={inheritedTextShadow.xOffset || 'e.g., 1px'}
					preset="shadow"
				/>
				<UnitValueControl
					label={__('Y Offset', 'axcelersblocks')}
					value={textShadow.yOffset || ''}
					onChange={(value) => updateTextShadow('yOffset', value)}
					placeholder={inheritedTextShadow.yOffset || 'e.g., 1px'}
					preset="shadow"
				/>
			</div>
			<div className='two-columns'>
				<UnitValueControl
					label={__('Blur Radius', 'axcelersblocks')}
					value={textShadow.blurRadius || ''}
					onChange={(value) => updateTextShadow('blurRadius', value)}
					placeholder={inheritedTextShadow.blurRadius || 'e.g., 2px'}
					preset="shadow"
				/>
			</div>
			<div className='two-columns'>
				<Dropdown
					className="text-shadow-color"
					position="bottom right"
					renderToggle={({ isOpen, onToggle }) => (
						<Button
							variant="secondary"
							onClick={onToggle}
							aria-expanded={isOpen}
						>
							<span style={{ background: textShadow.color || 'transparent' }}></span>
						</Button>
					)}
					renderContent={() => (
						<ColorPicker
							color={textShadow.color || '#000000'}
							onChangeComplete={(color) => updateTextShadow('color', color.hex)}
						/>
					)}
				/>
			</div>
			<ResponsiveInheritedNotice
				values={ effectValues }
				activeDevice={ activeDevice }
				selector={( value ) => value?.textShadow?.color || ''}
			/>
    </PanelBody>
  );
}
