import { __ } from "@wordpress/i18n";
import { useState, useEffect, useRef } from "@wordpress/element";

const IconAnimationPreviewSelector = ({ currentAnimation, onSelectAnimation }) => {
  const [animatingItems, setAnimatingItems] = useState({});
  const [autoPlay, setAutoPlay] = useState(true);
  const buttonRefs = useRef({});
  const intervalRefs = useRef({});

  const animations = [
    { 
      id: "01", 
      label: __("01", "zenblocks"),
      defaultIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; fill: none !important;"><path d="m9 18 6-6-6-6" fill="none" stroke="#000000" stroke-width="1.5"></path></svg>',
      hoverIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; fill: none !important;"><path d="M5 12h14" fill="none" stroke="#000000" stroke-width="1.5"></path> <path d="m12 5 7 7-7 7" fill="none" stroke="#000000" stroke-width="1.5"></path></svg>'
    },
    { 
      id: "02", 
      label: __("02", "zenblocks"),
      defaultIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; fill: none !important;"><path d="m9 18 6-6-6-6" fill="none" stroke="#000000" stroke-width="1.5"></path></svg>',
      hoverIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; fill: none !important;"><path d="M5 12h14" fill="none" stroke="#000000" stroke-width="1.5"></path> <path d="m12 5 7 7-7 7" fill="none" stroke="#000000" stroke-width="1.5"></path></svg>'
    },
    { 
      id: "03", 
      label: __("03", "zenblocks"),
      defaultIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; fill: none !important;"><path d="m9 18 6-6-6-6" fill="none" stroke="#000000" stroke-width="1.5"></path></svg>',
      hoverIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; fill: none !important;"><path d="M5 12h14" fill="none" stroke="#000000" stroke-width="1.5"></path> <path d="m12 5 7 7-7 7" fill="none" stroke="#000000" stroke-width="1.5"></path></svg>'
    },
    { 
      id: "04", 
      label: __("04", "zenblocks"),
      defaultIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; fill: none !important;"><path stroke-width="1.5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"></path></svg>',
      hoverIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; fill: none !important;"><path stroke-width="1.5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path></svg>'
    },
    { 
      id: "05", 
      label: __("05", "zenblocks"),
      defaultIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; fill: none !important;"><path stroke-width="1.5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"></path></svg>',
      hoverIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; fill: none !important;"><path stroke-width="1.5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path></svg>'
    },
    { 
      id: "06", 
      label: __("06", "zenblocks"),
      defaultIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; fill: none !important;"><path stroke-width="1.5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"></path></svg>',
      hoverIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; fill: none !important;"><path stroke-width="1.5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path></svg>'
    },
    { 
      id: "07", 
      label: __("07", "zenblocks"),
      defaultIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; fill: none !important;"><path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6" fill="none" stroke="#000000" stroke-width="1.5"></path> <path d="m21 3-9 9" fill="none" stroke="#000000" stroke-width="1.5"></path> <path d="M15 3h6v6" fill="none" stroke="#000000" stroke-width="1.5"></path></svg>',
      hoverIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; fill: none !important;"><path d="M7 7h10v10" fill="none" stroke="#000000" stroke-width="1.5"></path> <path d="M7 17 17 7" fill="none" stroke="#000000" stroke-width="1.5"></path></svg>'
    },
    { 
      id: "08", 
      label: __("08", "zenblocks"),
      defaultIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; fill: none !important;"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" fill="none" stroke="#000000" stroke-width="1.5"></path> <circle cx="12" cy="12" r="3" fill="none" stroke="#000000" stroke-width="1.5"></circle></svg>',
      hoverIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; fill: none !important;"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" fill="none" stroke="#000000" stroke-width="1.5"></path> <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" fill="none" stroke="#000000" stroke-width="1.5"></path> <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" fill="none" stroke="#000000" stroke-width="1.5"></path> <path d="m2 2 20 20" fill="none" stroke="#000000" stroke-width="1.5"></path></svg>'
    },
    { 
      id: "09", 
      label: __("09", "zenblocks"),
      defaultIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; fill: none !important;"><path d="M11 14h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 16" fill="none" stroke="#000000" stroke-width="1.5"></path> <path d="m7 20 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9" fill="none" stroke="#000000" stroke-width="1.5"></path> <path d="m2 15 6 6" fill="none" stroke="#000000" stroke-width="1.5"></path> <path d="M19.5 8.5c.7-.7 1.5-1.6 1.5-2.7A2.73 2.73 0 0 0 16 4a2.78 2.78 0 0 0-5 1.8c0 1.2.8 2 1.5 2.8L16 12Z" fill="none" stroke="#000000" stroke-width="1.5"></path></svg>',
      hoverIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; fill: none !important;"><path d="m11 17 2 2a1 1 0 1 0 3-3" fill="none" stroke="#000000" stroke-width="1.5"></path> <path d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4" fill="none" stroke="#000000" stroke-width="1.5"></path> <path d="m21 3 1 11h-2" fill="none" stroke="#000000" stroke-width="1.5"></path> <path d="M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3" fill="none" stroke="#000000" stroke-width="1.5"></path> <path d="M3 4h8" fill="none" stroke="#000000" stroke-width="1.5"></path></svg>'
    },
  ];

  // "none"が選択されているかどうか
  const isNoneSelected = currentAnimation === "none";

  // 自動再生
  useEffect(() => {
    // 自動再生がOFFの場合はインターバルをクリアして終了
    if (!autoPlay) {
      Object.values(intervalRefs.current).forEach((interval) => clearInterval(interval));
      intervalRefs.current = {};
      setAnimatingItems({});
      return;
    }

    animations.forEach((animation, index) => {
      setTimeout(() => {
        intervalRefs.current[animation.id] = setInterval(() => {
          setAnimatingItems((prev) => ({
            ...prev,
            [animation.id]: true,
          }));

          setTimeout(() => {
            setAnimatingItems((prev) => ({
              ...prev,
              [animation.id]: false,
            }));
          }, 1500);
        }, 3000);
      }, index * 300);
    });

    return () => {
      Object.values(intervalRefs.current).forEach((interval) => clearInterval(interval));
    };
  }, [autoPlay]);

  return (
    <div className="icon-animation-preview-selector">
      <div className="zenblocks-custom-color-palette__tabs">
        <button
          type="button"
          className={`zenblocks-custom-color-palette__tab ${!autoPlay ? "is-active" : ""}`}
          onClick={() => setAutoPlay(false)}
        >
          {__("Hover", "zenblocks")}
        </button>
        <button
          type="button"
          className={`zenblocks-custom-color-palette__tab ${autoPlay ? "is-active" : ""}`}
          onClick={() => setAutoPlay(true)}
        >
          {__("Auto", "zenblocks")}
        </button>
      </div>
      <div className="icon-animation-preview-grid">
        {animations.map((animation) => {
          const isActive = currentAnimation === animation.id;
          const isAnimating = animatingItems[animation.id];

          return (
            <div
              key={animation.id}
              className={`icon-animation-preview-item ${isActive ? "is-active" : ""}`}
              onClick={() => {
                // 選択済みのアニメーションを再度クリックした場合は解除（noneに設定）
                if (isActive) {
                  onSelectAnimation("none");
                } else {
                  onSelectAnimation(animation.id);
                }
              }}
            >
              <div
                className={`icon-animation-preview-wrapper wp-block-zenblocks-button-basic zenblocks-button-hover-animation-icon-${animation.id}${!autoPlay ? " is-hover-enabled" : ""}`}
              >
                <button 
                  type="button" 
                  className={`icon-animation-preview-button ${isAnimating ? "is-force-hover" : ""}`}
                  ref={(el) => (buttonRefs.current[animation.id] = el)}
                >
                  <div className="wp-block-zenblocks-button-basic-content">
                    <span className="wp-block-zenblocks-button-basic-icon">
                      <span className="default" dangerouslySetInnerHTML={{ __html: animation.defaultIcon }} />
                      <span className="hover" dangerouslySetInnerHTML={{ __html: animation.hoverIcon }} />
                    </span>
                  </div>
                </button>
              </div>
              <div className="icon-animation-preview-label">
                <span className="icon-animation-number">{animation.label}</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default IconAnimationPreviewSelector;
