import React from "react";
import { __ } from "@wordpress/i18n";
import { RangeControl, SelectControl } from "@wordpress/components";
import ResponsiveControlV2 from "../../ResponsiveControlV2";
import { useResponsiveTabV2 } from "../../ResponsiveTabContextV2";
import PanelBodyWithSync from "../../PanelBodyWithSync";
import ProFeatureOverlay from "../../ProFeatureOverlay";
import { getEnabledBreakpoints } from "../../../../../core/breakpoints";

const StylingOpacitySettingV6 = ({ attributes, setAttributes, title, initialOpen = false, onSync, isHoverState = false, supportsHover = true, isPro = false }) => {
  const effectiveHoverState = supportsHover ? isHoverState : false;
  const hoverSuffix = effectiveHoverState ? "Hover" : "";
  const responsiveAttrName = effectiveHoverState ? "responsiveStylingOpacityHover" : "responsiveStylingOpacity";
  const responsiveEnabled = attributes[responsiveAttrName] !== undefined ? attributes[responsiveAttrName] : false;
  const { activeTab } = useResponsiveTabV2();
  const enabledBreakpoints = getEnabledBreakpoints();

  const handleOpacityChange = (value) => {
    if (!responsiveEnabled) {
      const attrs = {};
      enabledBreakpoints.forEach(bp => {
        attrs[`stylingOpacity${bp.toUpperCase()}${hoverSuffix}`] = value;
      });
      setAttributes(attrs);
    } else {
      const deviceSuffix = activeTab.toUpperCase();
      setAttributes({ [`stylingOpacity${deviceSuffix}${hoverSuffix}`]: value });
    }
  };

  const handleMixBlendModeChange = (value) => {
    if (!responsiveEnabled) {
      const attrs = {};
      enabledBreakpoints.forEach(bp => {
        attrs[`stylingMixBlendMode${bp.toUpperCase()}${hoverSuffix}`] = value;
      });
      setAttributes(attrs);
    } else {
      const deviceSuffix = activeTab.toUpperCase();
      setAttributes({ [`stylingMixBlendMode${deviceSuffix}${hoverSuffix}`]: value });
    }
  };

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

    const syncAttrs = {};
    enabledBreakpoints.slice(1).forEach(bp => {
      syncAttrs[`stylingOpacity${bp.toUpperCase()}${hoverSuffix}`] = attributes[`stylingOpacityPC${hoverSuffix}`];
      syncAttrs[`stylingMixBlendMode${bp.toUpperCase()}${hoverSuffix}`] = attributes[`stylingMixBlendModePC${hoverSuffix}`];
    });
    setAttributes(syncAttrs);
  };

  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 deviceSuffix = tabName.toUpperCase();
    const opacityValue = attributes[`stylingOpacity${deviceSuffix}${hoverSuffix}`];
    const mixBlendModeValue = attributes[`stylingMixBlendMode${deviceSuffix}${hoverSuffix}`];

    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>
    );
  };

  const content = (
    <ResponsiveControlV2
      initialOpen={true}
      enableResponsiveToggle={true}
      responsiveEnabled={responsiveEnabled}
      onResponsiveToggle={handleResponsiveToggle}
      attributes={attributes}
      setAttributes={setAttributes}
      syncAttributeName={responsiveAttrName}
    >
      {(tabName) => renderOpacityControls(tabName)}
    </ResponsiveControlV2>
  );

  return (
    <PanelBodyWithSync title={title} initialOpen={initialOpen} onSync={onSync} className="zenblocks-nested-panel">
      {isPro ? <ProFeatureOverlay featureName="透明設定">{content}</ProFeatureOverlay> : content}
    </PanelBodyWithSync>
  );
};

export default StylingOpacitySettingV6;
