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

const StylingOpacitySetting = ({ attributes, setAttributes, title, initialOpen = false }) => {
  const { activeTab } = useResponsiveTab();

  const handleOpacityChange = (value) => {
    const attributeName = `stylingOpacity${activeTab.toUpperCase()}`;
    setAttributes({ [attributeName]: value });
  };

  const handleMixBlendModeChange = (value) => {
    const attributeName = `stylingMixBlendMode${activeTab.toUpperCase()}`;
    setAttributes({ [attributeName]: value });
  };

  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) => {
    return (
      <>
        <RangeControl label={__('Opacity', 'zenblocks')} value={attributes[`stylingOpacity${tabName.toUpperCase()}`]} onChange={(value) => handleOpacityChange(value)} min={0} max={1} step={0.01} />
        <SelectControl
          label={__('Mix Blend Mode', 'zenblocks')}
          value={attributes[`stylingMixBlendMode${tabName.toUpperCase()}`]}
          options={mixBlendModes}
          onChange={(value) => handleMixBlendModeChange(value)}
        />
      </>
    );
  };

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

export default StylingOpacitySetting;
