import { __ } from "@wordpress/i18n";
import { useResponsiveTabV2 } from "./ResponsiveTabContextV2";
import { useSelect, useDispatch } from "@wordpress/data";
import { PREVIEW_STORE } from "../../../store/preview";
import { getEnabledBreakpoints } from "../../../core/breakpoints";

const ResponsiveControlV2 = ({
  children,
  initialOpen = true,
  enableResponsiveToggle = false,
  responsiveEnabled = false,
  onResponsiveToggle = null,
  attributes = null,
  setAttributes = null,
  syncAttributeName = "responsiveEnabled",
  showPreviewToggle = false,
}) => {
  const { activeTab, setActiveTab, previewMode, setPreviewMode } = useResponsiveTabV2();
  const previewDevice = useSelect(
    (select) => select(PREVIEW_STORE).getDevice(),
    []
  );
  const { setDevice: setPreviewDevice } = useDispatch(PREVIEW_STORE);
  const enabledBreakpoints = getEnabledBreakpoints();

  const isResponsiveEnabled = enableResponsiveToggle ? responsiveEnabled : true;

  const handleToggleChange = (value) => {
    if (onResponsiveToggle) {
      onResponsiveToggle(value);
    } else if (setAttributes && attributes) {
      setAttributes({ [syncAttributeName]: value });
    }
    // レスポンシブOFF時のタブリセットは不要
    // OFF時は children("pc") が常に表示されるため、activeTabの変更は不要
    // また setActiveTab はグローバルストアに伝播するため、
    // 個別設定のON/OFFが他ブロックに影響するのを防ぐ
  };

  const handleTabSelect = (tabName) => {
    setActiveTab(tabName);
    setPreviewDevice(tabName);
  };

  const handlePreviewToggle = () => {
    setPreviewMode(!previewMode);
  };

  return (
    <div>
      {enableResponsiveToggle && (
        <div className="zenblocks-responsive-toggle-wrapper">
          <span className="zenblocks-responsive-toggle-label">{__("Responsive Settings", "zenblocks")}</span>
          <div className="zenblocks-responsive-toggle-buttons">
            <button
              type="button"
              className={`zenblocks-responsive-toggle-button${!isResponsiveEnabled ? " is-active" : ""}`}
              onClick={() => handleToggleChange(false)}
            >
              {__("OFF", "zenblocks")}
            </button>
            <button
              type="button"
              className={`zenblocks-responsive-toggle-button${isResponsiveEnabled ? " is-active" : ""}`}
              onClick={() => handleToggleChange(true)}
            >
              {__("ON", "zenblocks")}
            </button>
          </div>
        </div>
      )}

      {isResponsiveEnabled ? (
        <div className={`zenblocks-responsive-tab-panel${previewDevice !== 'pc' ? " zenblocks-preview-mode" : ""}`}>
          <div className="zenblocks-responsive-tab-list" role="tablist">
            {enabledBreakpoints.map((bp) => (
              <button
                key={bp}
                role="tab"
                type="button"
                aria-selected={activeTab === bp}
                className={`zenblocks-tab zenblocks-tab--${bp}${activeTab === bp ? " zenblocks-tab--active" : ""}${previewDevice === bp ? " zenblocks-tab--preview" : ""}`}
                onClick={() => handleTabSelect(bp)}
              >
                {bp.toUpperCase()}
              </button>
            ))}
          </div>
          <div className="zenblocks-responsive-tab-content" role="tabpanel">
            {children(activeTab)}
          </div>
        </div>
      ) : (
        <div>{children("pc")}</div>
      )}
    </div>
  );
};

export default ResponsiveControlV2;
