/**
 * 背景パターン生成ヘルパー関数
 *
 * @param {string} type パターンタイプ
 * @param {string} color パターンの色
 * @param {number} size パターンのサイズ
 * @param {number} opacity パターンの不透明度
 * @returns {Object|null} CSSスタイルオブジェクトまたはnull
 */
const getBackgroundPattern = (type, color, size, opacity = 1) => {
  if (!type || type === "none") return null;

  // パターンの不透明度を適用するための色の処理
  const applyOpacity = (colorValue, opacityValue) => {
    if (!colorValue) return "rgba(0, 0, 0, " + opacityValue + ")";

    // 既にrgbaの場合
    if (colorValue.startsWith("rgba")) {
      const parts = colorValue.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
      if (parts) {
        return `rgba(${parts[1]}, ${parts[2]}, ${parts[3]}, ${opacityValue})`;
      }
    }

    // rgbの場合
    if (colorValue.startsWith("rgb")) {
      const parts = colorValue.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
      if (parts) {
        return `rgba(${parts[1]}, ${parts[2]}, ${parts[3]}, ${opacityValue})`;
      }
    }

    // 16進数の場合（#000000）
    if (colorValue.startsWith("#")) {
      let r = 0,
        g = 0,
        b = 0;

      // #rgb or #rrggbb
      if (colorValue.length === 4) {
        r = parseInt(colorValue[1] + colorValue[1], 16);
        g = parseInt(colorValue[2] + colorValue[2], 16);
        b = parseInt(colorValue[3] + colorValue[3], 16);
      } else {
        r = parseInt(colorValue.substring(1, 3), 16);
        g = parseInt(colorValue.substring(3, 5), 16);
        b = parseInt(colorValue.substring(5, 7), 16);
      }

      return `rgba(${r}, ${g}, ${b}, ${opacityValue})`;
    }

    // デフォルトは黒色の透明度指定
    return `rgba(0, 0, 0, ${opacityValue})`;
  };

  const colorWithOpacity = applyOpacity(color, opacity);

  switch (type) {
    case "diagonal":
      return {
        backgroundImage: `linear-gradient(45deg, ${colorWithOpacity} 25%, transparent 25%),
                        linear-gradient(-45deg, ${colorWithOpacity} 25%, transparent 25%),
                        linear-gradient(45deg, transparent 75%, ${colorWithOpacity} 75%),
                        linear-gradient(-45deg, transparent 75%, ${colorWithOpacity} 75%)`,
        backgroundSize: `${size}px ${size}px`,
        backgroundPosition: `0 0, 0 ${size / 2}px, ${size / 2}px -${size / 2}px, -${size / 2}px 0px`,
      };
    case "dots":
      return {
        backgroundImage: `radial-gradient(${colorWithOpacity} 2px, transparent 2px)`,
        backgroundSize: `${size}px ${size}px`,
        backgroundPosition: `0 0`,
      };
    case "grid":
      return {
        backgroundImage: `linear-gradient(to right, ${colorWithOpacity} 1px, transparent 1px),
                        linear-gradient(to bottom, ${colorWithOpacity} 1px, transparent 1px)`,
        backgroundSize: `${size}px ${size}px`,
      };
    case "cross-lines":
      return {
        backgroundImage: `linear-gradient(45deg, ${colorWithOpacity} 1px, transparent 1px),
                        linear-gradient(-45deg, ${colorWithOpacity} 1px, transparent 1px)`,
        backgroundSize: `${size}px ${size}px`,
      };
    case "horizontal-lines":
      return {
        backgroundImage: `linear-gradient(to bottom, ${colorWithOpacity} 1px, transparent 1px)`,
        backgroundSize: `${size}px ${size}px`,
      };
    case "vertical-lines":
      return {
        backgroundImage: `linear-gradient(to right, ${colorWithOpacity} 1px, transparent 1px)`,
        backgroundSize: `${size}px ${size}px`,
      };
    case "circles":
      return {
        backgroundImage: `radial-gradient(circle, ${colorWithOpacity} 3px, transparent 3px)`,
        backgroundSize: `${size}px ${size}px`,
      };
    case "triangles":
      const triangleSize = size / 2;
      return {
        backgroundImage: `linear-gradient(45deg, ${colorWithOpacity} 50%, transparent 50%)`,
        backgroundSize: `${triangleSize}px ${triangleSize}px`,
      };
    default:
      return null;
  }
};

export default getBackgroundPattern;
