import "./style.scss";
import { getContainerClassName } from "../../../utils/container";

/**
 * コンテナー設定を表示するコンポーネント
 *
 * @param {Object} props コンポーネントのプロパティ
 * @param {Object} props.attributes ブロックの属性
 * @param {string} props.className 追加のクラス名（オプション）
 * @param {Object} props.style 追加のスタイル（オプション）
 * @param {boolean} props.applyMargin マージンを適用するかどうか（デフォルトは適用しない）
 * @param {boolean} props.applyPadding パディングを適用するかどうか（デフォルトは適用する）
 * @param {Object} props.children 子要素
 * @returns {JSX.Element} コンテナー要素
 */
const ContainerBasicRender = ({ attributes, className = "", style = {}, applyMargin = false, applyPadding = true, children }) => {
  // マージンとパディングのカスタムスタイルを計算
  const getMarginValue = (value, unit) => {
    // 'auto'の場合は値を無視してautoを返す
    if (unit === "auto" || value === "auto") {
      return "auto";
    }
    // 値が未定義や空の場合は0を使用
    const safeValue = value !== undefined && value !== '' ? value : 0;
    // その他の場合は値と単位を組み合わせる
    return `${safeValue}${unit || "px"}`;
  };

  // コンテナ幅のクラス名を取得
  const containerWidthClass = getContainerClassName(attributes.containerWidth);

  const containerStyles = {
    ...style,
    // Spacing Margin
    "--spacing-margin-top-pc": getMarginValue(
      attributes.spacingMarginUseIndividualPC ? attributes.spacingMarginTopPC : attributes.spacingMarginPC,
      attributes.spacingMarginUseIndividualPC ? attributes.spacingMarginUnitTopPC : attributes.spacingMarginUnitPC,
    ),
    "--spacing-margin-right-pc": getMarginValue(
      attributes.spacingMarginUseIndividualPC ? attributes.spacingMarginRightPC : attributes.spacingMarginPC,
      attributes.spacingMarginUseIndividualPC ? attributes.spacingMarginUnitRightPC : attributes.spacingMarginUnitPC,
    ),
    "--spacing-margin-bottom-pc": getMarginValue(
      attributes.spacingMarginUseIndividualPC ? attributes.spacingMarginBottomPC : attributes.spacingMarginPC,
      attributes.spacingMarginUseIndividualPC ? attributes.spacingMarginUnitBottomPC : attributes.spacingMarginUnitPC,
    ),
    "--spacing-margin-left-pc": getMarginValue(
      attributes.spacingMarginUseIndividualPC ? attributes.spacingMarginLeftPC : attributes.spacingMarginPC,
      attributes.spacingMarginUseIndividualPC ? attributes.spacingMarginUnitLeftPC : attributes.spacingMarginUnitPC,
    ),
    "--spacing-margin-top-sp": getMarginValue(
      attributes.spacingMarginUseIndividualSP ? attributes.spacingMarginTopSP : attributes.spacingMarginSP,
      attributes.spacingMarginUseIndividualSP ? attributes.spacingMarginUnitTopSP : attributes.spacingMarginUnitSP,
    ),
    "--spacing-margin-right-sp": getMarginValue(
      attributes.spacingMarginUseIndividualSP ? attributes.spacingMarginRightSP : attributes.spacingMarginSP,
      attributes.spacingMarginUseIndividualSP ? attributes.spacingMarginUnitRightSP : attributes.spacingMarginUnitSP,
    ),
    "--spacing-margin-bottom-sp": getMarginValue(
      attributes.spacingMarginUseIndividualSP ? attributes.spacingMarginBottomSP : attributes.spacingMarginSP,
      attributes.spacingMarginUseIndividualSP ? attributes.spacingMarginUnitBottomSP : attributes.spacingMarginUnitSP,
    ),
    "--spacing-margin-left-sp": getMarginValue(
      attributes.spacingMarginUseIndividualSP ? attributes.spacingMarginLeftSP : attributes.spacingMarginSP,
      attributes.spacingMarginUseIndividualSP ? attributes.spacingMarginUnitLeftSP : attributes.spacingMarginUnitSP,
    ),

    // Spacing Padding
    "--spacing-padding-top-pc": `${(attributes.spacingPaddingUseIndividualPC ? attributes.spacingPaddingTopPC : attributes.spacingPaddingPC) || 0}${attributes.spacingPaddingUseIndividualPC ? attributes.spacingPaddingUnitTopPC || "px" : attributes.spacingPaddingUnitPC || "px"}`,
    "--spacing-padding-right-pc": `${(attributes.spacingPaddingUseIndividualPC ? attributes.spacingPaddingRightPC : attributes.spacingPaddingPC) || 0}${attributes.spacingPaddingUseIndividualPC ? attributes.spacingPaddingUnitRightPC || "px" : attributes.spacingPaddingUnitPC || "px"}`,
    "--spacing-padding-bottom-pc": `${(attributes.spacingPaddingUseIndividualPC ? attributes.spacingPaddingBottomPC : attributes.spacingPaddingPC) || 0}${attributes.spacingPaddingUseIndividualPC ? attributes.spacingPaddingUnitBottomPC || "px" : attributes.spacingPaddingUnitPC || "px"}`,
    "--spacing-padding-left-pc": `${(attributes.spacingPaddingUseIndividualPC ? attributes.spacingPaddingLeftPC : attributes.spacingPaddingPC) || 0}${attributes.spacingPaddingUseIndividualPC ? attributes.spacingPaddingUnitLeftPC || "px" : attributes.spacingPaddingUnitPC || "px"}`,
    "--spacing-padding-top-sp": `${(attributes.spacingPaddingUseIndividualSP ? attributes.spacingPaddingTopSP : attributes.spacingPaddingSP) || 0}${attributes.spacingPaddingUseIndividualSP ? attributes.spacingPaddingUnitTopSP || "px" : attributes.spacingPaddingUnitSP || "px"}`,
    "--spacing-padding-right-sp": `${(attributes.spacingPaddingUseIndividualSP ? attributes.spacingPaddingRightSP : attributes.spacingPaddingSP) || 0}${attributes.spacingPaddingUseIndividualSP ? attributes.spacingPaddingUnitRightSP || "px" : attributes.spacingPaddingUnitSP || "px"}`,
    "--spacing-padding-bottom-sp": `${(attributes.spacingPaddingUseIndividualSP ? attributes.spacingPaddingBottomSP : attributes.spacingPaddingSP) || 0}${attributes.spacingPaddingUseIndividualSP ? attributes.spacingPaddingUnitBottomSP || "px" : attributes.spacingPaddingUnitSP || "px"}`,
    "--spacing-padding-left-sp": `${(attributes.spacingPaddingUseIndividualSP ? attributes.spacingPaddingLeftSP : attributes.spacingPaddingSP) || 0}${attributes.spacingPaddingUseIndividualSP ? attributes.spacingPaddingUnitLeftSP || "px" : attributes.spacingPaddingUnitSP || "px"}`,
  };

  return (
    <div className={`container-basic ${containerWidthClass} ${applyMargin ? "apply-margin" : ""} ${applyPadding ? "apply-padding" : ""} ${className}`} style={containerStyles}>
      {children}
    </div>
  );
};

export default ContainerBasicRender;
