import { __ } from '@wordpress/i18n';
import { TextControl, SelectControl, PanelBody } from '@wordpress/components';

export default function TransitionControl({ effect, inheritedEffect = {}, updateDeviceEffect }) {
  const transition = effect.transition || { property: '', duration: '', timingFunction: '', delay: '' };
  const inheritedTransition = inheritedEffect.transition || {};

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

  const timingFunctionOptions = [
    { label: __('Default', 'axcelersblocks'), value: '' },
    { label: __('Ease', 'axcelersblocks'), value: 'ease' },
    { label: __('Linear', 'axcelersblocks'), value: 'linear' },
    { label: __('Ease-In', 'axcelersblocks'), value: 'ease-in' },
    { label: __('Ease-Out', 'axcelersblocks'), value: 'ease-out' },
    { label: __('Ease-In-Out', 'axcelersblocks'), value: 'ease-in-out' },
  ];
  const timingOptions = [ ...timingFunctionOptions ];

  if ( ! transition.timingFunction && inheritedTransition.timingFunction ) {
    const inheritedOption = timingFunctionOptions.find(
      ( option ) => option.value === inheritedTransition.timingFunction
    );

    timingOptions[ 0 ] = {
      ...timingOptions[ 0 ],
      label: `${ __( 'Inherited', 'axcelersblocks' ) }: ${
        inheritedOption?.label || inheritedTransition.timingFunction
      }`,
    };
  }

  return (
    <PanelBody
			className='effect-child-controls'
      title={
				<span className="axb-title-with-badge">
					{__('Transition', 'axcelersblocks')}
				</span>
			}
      initialOpen={false}
    >
			<div className='two-columns'>
				<TextControl
					label={__('Property', 'axcelersblocks')}
					value={transition.property || ''}
					onChange={(value) => updateTransition('property', value)}
					placeholder={inheritedTransition.property || 'e.g., all'}
				/>
				<TextControl
					label={__('Duration', 'axcelersblocks')}
					value={transition.duration || ''}
					onChange={(value) => updateTransition('duration', value)}
					placeholder={inheritedTransition.duration || 'e.g., 0.3s'}
				/>
			</div>
			<div className='two-columns'>
				<SelectControl
					label={__('Timing', 'axcelersblocks')}
					value={transition.timingFunction || ''}
					options={timingOptions}
					onChange={(value) => updateTransition('timingFunction', value)}
				/>
				<TextControl
					label={__('Delay', 'axcelersblocks')}
					value={transition.delay || ''}
					onChange={(value) => updateTransition('delay', value)}
					placeholder={inheritedTransition.delay || 'e.g., 0s'}
				/>
			</div>
    </PanelBody>
  );
}
