import { ColorPicker, ToggleControl, PanelBody, RangeControl, Button } from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import ResponsiveControl from "../../ResponsiveControl";
import { useResponsiveTab } from "../../ResponsiveTabContext";

const CardStyleTextColorSetting = ({ attributes, setAttributes, title, initialOpen = false }) => {
  // PC/SP同期設定の状態
  const syncTextColor = attributes.cardStyleSyncTextColor !== undefined ? attributes.cardStyleSyncTextColor : true;
  const { activeTab } = useResponsiveTab();

  const handleTextColorChange = (color) => {
    if (syncTextColor && activeTab === "pc") {
      // 同期モードで、PC設定の場合はSP設定も更新
      setAttributes({
        cardStyleTextColorPC: color.hex,
        cardStyleTextColorSP: color.hex,
      });
    } else {
      // 非同期モードまたはSP設定の場合は個別に更新
      setAttributes({ [`cardStyleTextColor${activeTab.toUpperCase()}`]: color.hex });
    }
  };

  const handleTextOpacityChange = (opacity) => {
    // 確実に数値に変換して設定
    const numericOpacity = Number(parseFloat(opacity));
    if (syncTextColor && activeTab === "pc") {
      // 同期モードで、PC設定の場合はSP設定も更新
      setAttributes({
        cardStyleTextOpacityPC: numericOpacity,
        cardStyleTextOpacitySP: numericOpacity,
      });
    } else {
      // 非同期モードまたはSP設定の場合は個別に更新
      setAttributes({ [`cardStyleTextOpacity${activeTab.toUpperCase()}`]: numericOpacity });
    }
  };

  const resetTextColor = () => {
    if (syncTextColor && activeTab === "pc") {
      // 同期モードで、PC設定の場合はSP設定も更新
      setAttributes({
        cardStyleTextColorPC: "",
        cardStyleTextOpacityPC: 1,
        cardStyleTextColorSP: "",
        cardStyleTextOpacitySP: 1,
      });
    } else {
      // 非同期モードまたはSP設定の場合は個別に更新
      setAttributes({
        [`cardStyleTextColor${activeTab.toUpperCase()}`]: "",
        [`cardStyleTextOpacity${activeTab.toUpperCase()}`]: 1,
      });
    }
  };

  // 同期設定の切り替え
  const handleSyncToggle = (value) => {
    setAttributes({ cardStyleSyncTextColor: value });

    // 同期モードに切り替えた場合、SPの設定をPCの設定に合わせる
    if (value) {
      setAttributes({
        cardStyleTextColorSP: attributes.cardStyleTextColorPC,
        cardStyleTextOpacitySP: attributes.cardStyleTextOpacityPC,
      });
    }
  };

  const renderTabContent = (tab) => {
    const textColor = attributes[`cardStyleTextColor${tab.toUpperCase()}`] || "#000000";
    const textOpacity = attributes[`cardStyleTextOpacity${tab.toUpperCase()}`] || 1;

    return (
      <>
        <ColorPicker 
          color={textColor} 
          onChangeComplete={handleTextColorChange} 
          disableAlpha 
        />
        <RangeControl 
          label={__("Opacity", "zenblocks")} 
          value={textOpacity} 
          onChange={handleTextOpacityChange} 
          min={0} 
          max={1} 
          step={0.1} 
        />
        <Button isSecondary onClick={resetTextColor} style={{ marginTop: "10px" }}>
          {__("Reset", "zenblocks")}
        </Button>
      </>
    );
  };

  return (
    <PanelBody title={title} initialOpen={initialOpen}>
      {/* デバッグ情報を表示 */}
      <div style={{ background: '#f0f0f0', padding: '10px', marginBottom: '10px', fontSize: '12px' }}>
        <strong>デバッグ情報:</strong><br/>
        PC文字色: {attributes.cardStyleTextColorPC || '未設定'}<br/>
        SP文字色: {attributes.cardStyleTextColorSP || '未設定'}<br/>
        同期設定: {syncTextColor ? '有効' : '無効'}<br/>
        アクティブタブ: {activeTab}
      </div>
      <div style={{ paddingTop: '10px' }}>
        <ToggleControl
          label={__("Sync Settings", "zenblocks")}
          checked={syncTextColor}
          onChange={handleSyncToggle}
          help={syncTextColor ? __('PC settings are automatically applied to SP', 'zenblocks') : __('PC and SP can be set individually', 'zenblocks')}
        />
      </div>
      <ResponsiveControl initialOpen={true}>{renderTabContent}</ResponsiveControl>
      {syncTextColor && activeTab === "sp" && (
        <div style={{ padding: "10px", backgroundColor: "#f0f0f0", marginTop: "10px", borderRadius: "4px" }}>
          {__("In sync mode, PC settings are applied.", "zenblocks")}
        </div>
      )}
    </PanelBody>
  );
};

export default CardStyleTextColorSetting;
