import React from "react";
import { __ } from "@wordpress/i18n";
import { ToggleControl } 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 DisplaySettingV5 = ({ attributes, setAttributes, title, initialOpen = false, opened, onToggle, onSync, isPro = false }) => {
  const responsiveAttrName = "responsiveDisplay";
  const responsiveEnabled = attributes[responsiveAttrName] !== undefined ? attributes[responsiveAttrName] : false;
  const { activeTab } = useResponsiveTabV2();
  const enabledBreakpoints = getEnabledBreakpoints();

  const handleVisibilityChange = (value) => {
    if (!responsiveEnabled) {
      const updates = {};
      enabledBreakpoints.forEach((bp) => {
        updates[`displayVisible${bp.toUpperCase()}`] = value;
      });
      setAttributes(updates);
    } else {
      const deviceSuffix = activeTab.toUpperCase();
      setAttributes({ [`displayVisible${deviceSuffix}`]: value });
    }
  };

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

    const syncAttrs = {};
    const pcValue = attributes.displayVisiblePC;
    enabledBreakpoints.forEach((bp) => {
      if (bp !== 'pc') {
        syncAttrs[`displayVisible${bp.toUpperCase()}`] = pcValue;
      }
    });
    setAttributes(syncAttrs);
  };

  const renderDisplayControls = (tabName) => {
    const deviceSuffix = tabName.toUpperCase();
    const visibleValue = attributes[`displayVisible${deviceSuffix}`] !== undefined ? attributes[`displayVisible${deviceSuffix}`] : true;

    return (
      <ToggleControl
        label={__("Visible", "zenblocks")}
        help={visibleValue ? __("Visible on this device", "zenblocks") : __("Hidden on this device", "zenblocks")}
        checked={visibleValue}
        onChange={handleVisibilityChange}
        className="zenblocks-inspector-display-setting__visibility-toggle"
      />
    );
  };

  const content = (
    <div className="zenblocks-inspector-display-setting">
      <ResponsiveControlV2
      initialOpen={true}
      enableResponsiveToggle={true}
      responsiveEnabled={responsiveEnabled}
      onResponsiveToggle={handleResponsiveToggle}
      attributes={attributes}
      setAttributes={setAttributes}
      syncAttributeName={responsiveAttrName}
    >
      {(tabName) => renderDisplayControls(tabName)}
      </ResponsiveControlV2>
    </div>
  );

  return (
    <PanelBodyWithSync title={title || __("Display", "zenblocks")} initialOpen={initialOpen} opened={opened} onToggle={onToggle} onSync={onSync} className="zenblocks-nested-panel" level={2} panelType="settings" panelName="display">
      {isPro ? <ProFeatureOverlay featureName="表示設定">{content}</ProFeatureOverlay> : content}
    </PanelBodyWithSync>
  );
};

export const getDisplayStyles = (attributes) => {
  const enabledBreakpoints = getEnabledBreakpoints();
  const styles = {};
  
  enabledBreakpoints.forEach((bp) => {
    styles[bp] = {};
    const visible = attributes[`displayVisible${bp.toUpperCase()}`];
    if (visible === false) {
      styles[bp].display = "none";
    }
  });

  return styles;
};

export const getDisplayClasses = (attributes) => {
  const enabledBreakpoints = getEnabledBreakpoints();
  const classes = [];

  enabledBreakpoints.forEach((bp) => {
    const visible = attributes[`displayVisible${bp.toUpperCase()}`];
    if (visible === false) {
      classes.push(`zenblocks-hidden-${bp}`);
    }
  });

  return classes;
};

export default DisplaySettingV5;
