import React from 'react';
import { __ } from '@wordpress/i18n';
import { PanelBody, RangeControl, SelectControl } from '@wordpress/components';
import ResponsiveControl from '../../ResponsiveControl';
import { useResponsiveTab } from '../../ResponsiveTabContext';

const StylingOpacitySettingV3 = ({ attributes, setAttributes, title, initialOpen = false, isHoverState = false }) => {
  const { activeTab } = useResponsiveTab();
  
  const responsiveAttrName = isHoverState ? 'responsiveStylingOpacityHover' : 'responsiveStylingOpacity';
  const responsiveEnabled = attributes[responsiveAttrName] !== undefined ? attributes[responsiveAttrName] : false;

  const handleOpacityChange = (value) => {
    const suffix = isHoverState ? 'Hover' : '';
    if (!responsiveEnabled) {
      setAttributes({
        [`stylingOpacityPC${suffix}`]: value,
        [`stylingOpacityMD${suffix}`]: value,
        [`stylingOpacityTB${suffix}`]: value,
        [`stylingOpacitySP${suffix}`]: value,
      });
    } else {
      const attributeName = `stylingOpacity${activeTab.toUpperCase()}${suffix}`;
      setAttributes({ [attributeName]: value });
    }
  };

  const handleMixBlendModeChange = (value) => {
    const suffix = isHoverState ? 'Hover' : '';
    if (!responsiveEnabled) {
      setAttributes({
        [`stylingMixBlendModePC${suffix}`]: value,
        [`stylingMixBlendModeMD${suffix}`]: value,
        [`stylingMixBlendModeTB${suffix}`]: value,
        [`stylingMixBlendModeSP${suffix}`]: value,
      });
    } else {
      const attributeName = `stylingMixBlendMode${activeTab.toUpperCase()}${suffix}`;
      setAttributes({ [attributeName]: value });
    }
  };

  const handleResponsiveToggle = (value) => {
    setAttributes({ [responsiveAttrName]: value });

    if (!value) {
      const suffix = isHoverState ? 'Hover' : '';
      setAttributes({
        [`stylingOpacityMD${suffix}`]: attributes[`stylingOpacityPC${suffix}`],
        [`stylingOpacityTB${suffix}`]: attributes[`stylingOpacityPC${suffix}`],
        [`stylingOpacitySP${suffix}`]: attributes[`stylingOpacityPC${suffix}`],
        [`stylingMixBlendModeMD${suffix}`]: attributes[`stylingMixBlendModePC${suffix}`],
        [`stylingMixBlendModeTB${suffix}`]: attributes[`stylingMixBlendModePC${suffix}`],
        [`stylingMixBlendModeSP${suffix}`]: attributes[`stylingMixBlendModePC${suffix}`],
      });
    }
  };

  const mixBlendModes = [
    { label: __('Normal', 'zenblocks'), value: 'normal' },
    { label: __('Multiply', 'zenblocks'), value: 'multiply' },
    { label: __('Screen', 'zenblocks'), value: 'screen' },
    { label: __('Overlay', 'zenblocks'), value: 'overlay' },
    { label: __('Darken', 'zenblocks'), value: 'darken' },
    { label: __('Lighten', 'zenblocks'), value: 'lighten' },
    { label: __('Color Dodge', 'zenblocks'), value: 'color-dodge' },
    { label: __('Color Burn', 'zenblocks'), value: 'color-burn' },
    { label: __('Hard Light', 'zenblocks'), value: 'hard-light' },
    { label: __('Soft Light', 'zenblocks'), value: 'soft-light' },
    { label: __('Difference', 'zenblocks'), value: 'difference' },
    { label: __('Exclusion', 'zenblocks'), value: 'exclusion' },
    { label: __('Hue', 'zenblocks'), value: 'hue' },
    { label: __('Saturation', 'zenblocks'), value: 'saturation' },
    { label: __('Color', 'zenblocks'), value: 'color' },
    { label: __('Luminosity', 'zenblocks'), value: 'luminosity' },
  ];

  const renderOpacityControls = (tabName) => {
    const suffix = isHoverState ? 'Hover' : '';
    const opacityValue = attributes[`stylingOpacity${tabName.toUpperCase()}${suffix}`];
    const mixBlendModeValue = attributes[`stylingMixBlendMode${tabName.toUpperCase()}${suffix}`];

    return (
      <div className="zenblocks-inspector-styling-opacity">
        <RangeControl 
          label={__('Opacity', 'zenblocks')} 
          value={opacityValue} 
          onChange={handleOpacityChange} 
          min={0} 
          max={1} 
          step={0.01}
          className="zenblocks-inspector-styling-opacity__opacity-control"
        />
        <SelectControl
          label={__('Mix Blend Mode', 'zenblocks')}
          value={mixBlendModeValue}
          options={mixBlendModes}
          onChange={handleMixBlendModeChange}
          className="zenblocks-inspector-styling-opacity__blend-mode-select"
        />
      </div>
    );
  };

  return (
    <PanelBody title={title} initialOpen={initialOpen}>
      <ResponsiveControl 
        initialOpen={true}
        enableResponsiveToggle={true}
        responsiveEnabled={responsiveEnabled}
        onResponsiveToggle={handleResponsiveToggle}
      >
        {(tabName) => renderOpacityControls(tabName)}
      </ResponsiveControl>
    </PanelBody>
  );
};

export default StylingOpacitySettingV3;
