import { __ } from '@wordpress/i18n';
import { TextControl, PanelBody } from '@wordpress/components';
import UnitValueControl from '../../controls/UnitValueControl';

export default function FilterControl({ effect, inheritedEffect = {}, updateDeviceEffect }) {
  const filter = effect.filter || { blur: '', brightness: '', contrast: '', grayscale: '', hueRotate: '', invert: '', opacity: '', saturate: '', sepia: '' };
  const inheritedFilter = inheritedEffect.filter || {};

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

  return (
    <PanelBody
			className='effect-child-controls'
      title={
				<span className="axb-title-with-badge">
					{__('Filter', 'axcelersblocks')}
				</span>
			}
      initialOpen={false}
    >
			<div className='two-columns'>
				<UnitValueControl
					label={__('Blur', 'axcelersblocks')}
					value={filter.blur || ''}
					onChange={(value) => updateFilter('blur', value)}
					placeholder={inheritedFilter.blur || 'e.g., 5px'}
					preset="blur"
				/>
				<UnitValueControl
					label={__('Brightness', 'axcelersblocks')}
					value={filter.brightness || ''}
					onChange={(value) => updateFilter('brightness', value)}
					placeholder={inheritedFilter.brightness || 'e.g., 100%'}
					preset="filterPercent"
				/>
			</div>
			<div className='two-columns'>
				<UnitValueControl
					label={__('Contrast', 'axcelersblocks')}
					value={filter.contrast || ''}
					onChange={(value) => updateFilter('contrast', value)}
					placeholder={inheritedFilter.contrast || 'e.g., 100%'}
					preset="filterPercent"
				/>
				<UnitValueControl
					label={__('Grayscale', 'axcelersblocks')}
					value={filter.grayscale || ''}
					onChange={(value) => updateFilter('grayscale', value)}
					placeholder={inheritedFilter.grayscale || 'e.g., 0%'}
					preset="filterPercent"
				/>
			</div>
			<div className='two-columns'>
				<TextControl
					label={__('Hue Rotate', 'axcelersblocks')}
					value={filter.hueRotate || ''}
					onChange={(value) => updateFilter('hueRotate', value)}
					placeholder={inheritedFilter.hueRotate || 'e.g., 0deg'}
				/>
				<UnitValueControl
					label={__('Invert', 'axcelersblocks')}
					value={filter.invert || ''}
					onChange={(value) => updateFilter('invert', value)}
					placeholder={inheritedFilter.invert || 'e.g., 0%'}
					preset="filterPercent"
				/>
			</div>
			<div className='two-columns'>
				<UnitValueControl
					label={__('Opacity', 'axcelersblocks')}
					value={filter.opacity || ''}
					onChange={(value) => updateFilter('opacity', value)}
					placeholder={inheritedFilter.opacity || 'e.g., 100%'}
					preset="filterPercent"
				/>
				<UnitValueControl
					label={__('Saturate', 'axcelersblocks')}
					value={filter.saturate || ''}
					onChange={(value) => updateFilter('saturate', value)}
					placeholder={inheritedFilter.saturate || 'e.g., 100%'}
					preset="filterPercent"
				/>
			</div>
			<div className='two-columns'>
				<UnitValueControl
					label={__('Sepia', 'axcelersblocks')}
					value={filter.sepia || ''}
					onChange={(value) => updateFilter('sepia', value)}
					placeholder={inheritedFilter.sepia || 'e.g., 0%'}
					preset="filterPercent"
				/>
			</div>
    </PanelBody>
  );
}
