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

export default function BoxShadowControl({ activeDevice, effectValues, effect, inheritedEffect = {}, updateDeviceEffect }) {
  const boxShadow = effect.boxShadow || { xOffset: '', yOffset: '', blurRadius: '', spreadRadius: '', color: '', inset: false };
  const inheritedBoxShadow = inheritedEffect.boxShadow || {};

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

  return (
    <PanelBody
			className='effect-child-controls'
      title={__('Box Shadow', 'axcelersblocks')}
      initialOpen={false}
    >
			<div className='two-columns'>
				<UnitValueControl
					label={__('X Offset', 'axcelersblocks')}
					value={boxShadow.xOffset || ''}
					onChange={(value) => updateBoxShadow('xOffset', value)}
					placeholder={inheritedBoxShadow.xOffset || 'e.g., 2px'}
					preset="shadow"
				/>
				<UnitValueControl
					label={__('Y Offset', 'axcelersblocks')}
					value={boxShadow.yOffset || ''}
					onChange={(value) => updateBoxShadow('yOffset', value)}
					placeholder={inheritedBoxShadow.yOffset || 'e.g., 2px'}
					preset="shadow"
				/>
			</div>
			<div className='two-columns'>
				<UnitValueControl
					label={__('Blur Radius', 'axcelersblocks')}
					value={boxShadow.blurRadius || ''}
					onChange={(value) => updateBoxShadow('blurRadius', value)}
					placeholder={inheritedBoxShadow.blurRadius || 'e.g., 4px'}
					preset="shadow"
				/>
				<UnitValueControl
					label={__('Spread Radius', 'axcelersblocks')}
					value={boxShadow.spreadRadius || ''}
					onChange={(value) => updateBoxShadow('spreadRadius', value)}
					placeholder={inheritedBoxShadow.spreadRadius || 'e.g., 0px'}
					preset="shadow"
				/>
			</div>
			<div className='two-columns'>
				<Dropdown
					className="box-shadow-color"
					position="bottom right"
					renderToggle={({ isOpen, onToggle }) => (
						<Button
							variant="secondary"
							onClick={onToggle}
							aria-expanded={isOpen}
						>
							<span style={{ background: boxShadow.color || 'transparent' }}></span>
						</Button>
					)}
					renderContent={() => (
						<ColorPicker
							color={boxShadow.color || '#000000'}
							onChangeComplete={(color) => updateBoxShadow('color', color.hex)}
						/>
					)}
				/>
				<ToggleControl
					label={__('Inset', 'axcelersblocks')}
					checked={boxShadow.inset || false}
					onChange={(value) => updateBoxShadow('inset', value)}
				/>
			</div>
			<ResponsiveInheritedNotice
				values={ effectValues }
				activeDevice={ activeDevice }
				selector={( value ) => value?.boxShadow?.color || ''}
			/>
			<ResponsiveInheritedNotice
				values={ effectValues }
				activeDevice={ activeDevice }
				selector={( value ) => {
					if ( value?.boxShadow?.inset === true ) {
						return __( 'Inset', 'axcelersblocks' );
					}

					if ( value?.boxShadow?.inset === false ) {
						return __( 'Outset', 'axcelersblocks' );
					}

					return '';
				} }
			/>
    </PanelBody>
  );
}
