/**
 * IconSelectSettingV2
 *
 * PanelBody�+�����x�-�(n�������
 * buttonBasic(nPanelBody�������
 */

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

/**
 * IconSelectSettingV2 Component
 *
 * @param {Object} props
 * @param {Object} props.attributes - ��ïn^'
 * @param {Function} props.setAttributes - ^'���Y��p
 * @param {string} props.icon - �(n����$
 * @param {string} props.iconColor - ����r
 * @param {string} props.iconStrokeWidth - ����n�����E
 * @param {string} props.textColor - ƭ��r$-�(	
 * @param {Function} props.getCurrentIconColor - �(n����r�֗Y��p
 * @param {string} props.title - ��뿤��
 * @param {boolean} props.initialOpen - ���K
 * @param {boolean} props.panelState - ���K
 * @param {Function} props.onTogglePanel - ���Ȱ�p
 * @returns {JSX.Element}
 */
const IconSelectSettingV2 = ({
  attributes,
  setAttributes,
  icon,
  iconColor,
  iconStrokeWidth,
  textColor,
  getCurrentIconColor,
  title,
  initialOpen = false,
  panelState,
  onTogglePanel,
}) => {
  return (
    <PanelBody title={title || __("Icon Selection", "zenblocks")} initialOpen={initialOpen || panelState} onToggle={onTogglePanel}>
      <div className="icon-select-setting">
        <SVGIconSetting
          value={icon}
          color={getCurrentIconColor()}
          strokeWidth={iconStrokeWidth || 1.75}
          onChange={(value) => {
            const updates = { icon: value };

            if (value && value !== "" && (!icon || icon === "")) {
              if (!iconColor || iconColor === "") {
                updates.iconColor = textColor || "";
              }
              if ((value.startsWith("lucide-") || value.startsWith("custom-svg-") || value.includes("svg") || value.includes("custom")) && !iconStrokeWidth) {
                updates.iconStrokeWidth = 1.75;
              }
            }

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

/**
 * �(n����r�֗Y������p
 * @param {string} icon - ����$
 * @param {string} iconColor - ����r
 * @param {string} textColor - ƭ��r
 * @returns {string} �(n����r
 */
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 IconSelectSettingV2;
