import { __ } from '@wordpress/i18n';
import { Button, TextControl, SelectControl } from '@wordpress/components';
import BoxShadowControl from './BoxShadowControl';
import TransitionControl from './TransitionControl';
import FilterControl from './FilterControl';
import TextShadowControl from './TextShadowControl';
import TransformControl from './TransformControl';
import { DEFAULT_TRANSFORM_VALUES } from './transformUtils';
import { getInheritedResponsiveValue, getResponsivePlaceholder, getResponsiveSelectOptions } from '../../controls/responsiveValueUtils';

export default function Effects({ activeDevice, effect, setAttributes }) {
  const deviceVal = effect[activeDevice] || {};
  const inheritedEffect = getInheritedResponsiveValue(effect, activeDevice) || {};

  const updateDeviceEffect = (key, value) => {
    setAttributes({
      effect: {
        ...effect,
        [activeDevice]: {
          ...deviceVal,
          [key]: value,
        },
      },
    });
  };

  const resetEffect = () => {
    setAttributes({
      effect: {
        ...effect,
        [activeDevice]: {
          boxShadow: { xOffset:'', yOffset:'', blurRadius:'', spreadRadius:'', color:'', inset:false },
          transition: { property:'', duration:'', timingFunction:'', delay:'' },
          filter: { blur:'', brightness:'', contrast:'', grayscale:'', hueRotate:'', invert:'', opacity:'', saturate:'', sepia:'' },
          textShadow: { xOffset:'', yOffset:'', blurRadius:'', color:'' },
          transform: { ...DEFAULT_TRANSFORM_VALUES },
          opacity: '',
          visibility: '',
        },
      },
    });
  };

  const visibilityOptions = [
    { label: __('Default', 'axcelersblocks'), value: '' },
    { label: __('Visible', 'axcelersblocks'), value: 'visible' },
    { label: __('Hidden', 'axcelersblocks'), value: 'hidden' },
    { label: __('Collapse', 'axcelersblocks'), value: 'collapse' },
  ];
  const visibilitySelectOptions = getResponsiveSelectOptions({
    values: effect,
    activeDevice,
    selector: (value) => value?.visibility || '',
    options: visibilityOptions,
    inheritedLabel: __('Inherited', 'axcelersblocks'),
  });

  return (
    <>
      <BoxShadowControl activeDevice={activeDevice} effectValues={effect} effect={deviceVal} inheritedEffect={inheritedEffect} updateDeviceEffect={updateDeviceEffect} />
      <TransitionControl effect={deviceVal} inheritedEffect={inheritedEffect} updateDeviceEffect={updateDeviceEffect} />
      <FilterControl effect={deviceVal} inheritedEffect={inheritedEffect} updateDeviceEffect={updateDeviceEffect} />
      <TextShadowControl activeDevice={activeDevice} effectValues={effect} effect={deviceVal} inheritedEffect={inheritedEffect} updateDeviceEffect={updateDeviceEffect} />
      <TransformControl effect={deviceVal} inheritedEffect={inheritedEffect} updateDeviceEffect={updateDeviceEffect} />

      <TextControl
        className="effect-opacity-control"
        label={__('Opacity', 'axcelersblocks')}
        value={deviceVal.opacity || ''}
        onChange={(v) => updateDeviceEffect('opacity', v)}
        placeholder={getResponsivePlaceholder({
          values: effect,
          activeDevice,
          selector: (value) => value?.opacity || '',
          fallback: 'e.g., 0.5',
        })}
      />

      <SelectControl
        className="effect-visibility-control"
        label={__('Visibility', 'axcelersblocks')}
        value={deviceVal.visibility || ''}
        options={visibilitySelectOptions}
        onChange={(v) => updateDeviceEffect('visibility', v)}
      />

      <Button className="reset-btn" onClick={resetEffect} showTooltip label={__('Reset', 'axcelersblocks')}>
        {__('Reset', 'axcelersblocks')}
      </Button>
    </>
  );
}
