import { __ } from "@wordpress/i18n";
import { PanelBody } from "@wordpress/components";
import SVGIconSetting, { renderSVGIcon } from "./SVGIconSetting";

const IconSelectSettingV3 = ({ attributes, setAttributes, icon, iconColor, iconStrokeWidth, textColor, getCurrentIconColor, title, initialOpen = false, panelState, onTogglePanel, isHoverState = false }) => {
  const suffix = isHoverState ? "Hover" : "";

  const currentIcon = isHoverState ? attributes.iconHover || icon : icon;
  const currentIconColor = isHoverState ? attributes.iconColorHover || iconColor : iconColor;
  const currentIconStrokeWidth = isHoverState ? attributes.iconStrokeWidthHover || iconStrokeWidth : iconStrokeWidth;
  const currentTextColor = isHoverState ? attributes.textColorHover || textColor : textColor;

  return (
    <PanelBody title={title || __("Icon Selection", "zenblocks")} initialOpen={initialOpen || panelState} onToggle={onTogglePanel} className="zenblocks-panel zenblocks-panel--level-2 zenblocks-panel--settings zenblocks-panel--icon-select">
      <div className="zenblocks-inspector-icon-select">
        <SVGIconSetting
          value={currentIcon}
          color={getCurrentIconColor()}
          strokeWidth={currentIconStrokeWidth || 1.75}
          onChange={(value) => {
            const updates = {};
            updates[`icon${suffix}`] = value;

            if (value && value !== "" && (!currentIcon || currentIcon === "")) {
              if (!currentIconColor || currentIconColor === "") {
                updates[`iconColor${suffix}`] = currentTextColor || "";
              }
              if ((value.startsWith("lucide-") || value.startsWith("custom-svg-") || value.includes("svg") || value.includes("custom")) && !currentIconStrokeWidth) {
                updates[`iconStrokeWidth${suffix}`] = 1.75;
              }
            }

            setAttributes(updates);
          }}
          onColorChange={(value) => {
            setAttributes({
              [`iconColor${suffix}`]: value,
            });
          }}
          onStrokeWidthChange={(value) => {
            setAttributes({
              [`iconStrokeWidth${suffix}`]: value,
            });
          }}
        />
      </div>
    </PanelBody>
  );
};

export const getCurrentIconColor = (icon, iconColor, textColor) => {
  if (!icon || icon === "") return "inherit";

  if (iconColor && iconColor !== "") {
    return iconColor;
  }

  if (textColor && textColor !== "") {
    return textColor;
  }

  return "currentColor";
};

export { renderSVGIcon };

export default IconSelectSettingV3;
