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

export default function TransformControl({ effect, inheritedEffect = {}, updateDeviceEffect }) {
  const transform = { ...DEFAULT_TRANSFORM_VALUES, ...(effect.transform || {}) };
  const inheritedTransform = {
    ...DEFAULT_TRANSFORM_VALUES,
    ...(inheritedEffect.transform || {}),
  };

  const updateTransform = (key, value) => {
    const nextTransform = { ...transform, [key]: value };

    if (key === 'rotateZ') {
      nextTransform.rotate = '';
    }

    updateDeviceEffect('transform', nextTransform);
  };

  return (
    <PanelBody
			className='effect-child-controls'
      title={
				<span className="axb-title-with-badge">
					{__('Transform', 'axcelersblocks')}
				</span>
			}
      initialOpen={false}
    >
			<div className='three-columns'>
				<UnitValueControl
					label={__('Translate X', 'axcelersblocks')}
					value={transform.translateX || ''}
					onChange={(value) => updateTransform('translateX', value)}
					placeholder={inheritedTransform.translateX || 'e.g., 10px'}
					preset="translate"
				/>
				<UnitValueControl
					label={__('Translate Y', 'axcelersblocks')}
					value={transform.translateY || ''}
					onChange={(value) => updateTransform('translateY', value)}
					placeholder={inheritedTransform.translateY || 'e.g., 10px'}
					preset="translate"
				/>
				<UnitValueControl
					label={__('Translate Z', 'axcelersblocks')}
					value={transform.translateZ || ''}
					onChange={(value) => updateTransform('translateZ', value)}
					placeholder={inheritedTransform.translateZ || 'e.g., 10px'}
					preset="translateZ"
				/>
			</div>
			<div className='two-columns'>
				<TextControl
					label={__('Scale X', 'axcelersblocks')}
					value={transform.scaleX || ''}
					onChange={(value) => updateTransform('scaleX', value)}
					placeholder={inheritedTransform.scaleX || 'e.g., 1'}
				/>
				<TextControl
					label={__('Scale Y', 'axcelersblocks')}
					value={transform.scaleY || ''}
					onChange={(value) => updateTransform('scaleY', value)}
					placeholder={inheritedTransform.scaleY || 'e.g., 1'}
				/>
			</div>
			<div className='three-columns'>
				<TextControl
					label={__('Rotate X', 'axcelersblocks')}
					value={transform.rotateX || ''}
					onChange={(value) => updateTransform('rotateX', value)}
					placeholder={inheritedTransform.rotateX || 'e.g., 45deg'}
				/>
				<TextControl
					label={__('Rotate Y', 'axcelersblocks')}
					value={transform.rotateY || ''}
					onChange={(value) => updateTransform('rotateY', value)}
					placeholder={inheritedTransform.rotateY || 'e.g., 45deg'}
				/>
				<TextControl
					label={__('Rotate Z', 'axcelersblocks')}
					value={transform.rotateZ || transform.rotate || ''}
					onChange={(value) => updateTransform('rotateZ', value)}
					placeholder={inheritedTransform.rotateZ || inheritedTransform.rotate || 'e.g., 45deg'}
				/>
			</div>
			<div className='two-columns'>
				<TextControl
					label={__('Skew X', 'axcelersblocks')}
					value={transform.skewX || ''}
					onChange={(value) => updateTransform('skewX', value)}
					placeholder={inheritedTransform.skewX || 'e.g., 10deg'}
				/>
				<TextControl
					label={__('Skew Y', 'axcelersblocks')}
					value={transform.skewY || ''}
					onChange={(value) => updateTransform('skewY', value)}
					placeholder={inheritedTransform.skewY || 'e.g., 10deg'}
				/>
			</div>
    </PanelBody>
  );
}
