import { PanelBody, SelectControl } from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import { ResponsiveTabProvider } from "../../ResponsiveTabContext";

// スペーシング設定用モジュール
import SpacingPaddingSetting from "../../settings-modules/spacing/SpacingPaddingSettingV2";
import SpacingMarginSetting from "../../settings-modules/spacing/SpacingMarginSettingV2";

// 共通コンテナユーティリティ
import { getContainerOptions } from "../../../utils/container";

/**
 * コンテナー設定コンポーネント
 *
 * @param {Object} props コンポーネントのプロパティ
 * @param {Object} props.attributes ブロックの属性
 * @param {Function} props.setAttributes 属性を更新する関数
 * @param {string} props.title パネルのタイトル
 * @param {boolean} props.initialOpen パネルの初期状態
 * @returns {JSX.Element} コンテナー設定パネル
 */
const ContainerBasic = ({ attributes, setAttributes, title = __("Container Settings", "zenblocks"), initialOpen = false }) => {
  // コンテナ幅の選択オプション
  const containerOptions = getContainerOptions();

  return (
    <PanelBody title={title} initialOpen={initialOpen}>
      <PanelBody title={__("Width", "zenblocks")} initialOpen={false}>
        <SelectControl label={__("Container Width", "zenblocks")} value={attributes.containerWidth} options={containerOptions} onChange={(value) => setAttributes({ containerWidth: value })} />
      </PanelBody>
      <ResponsiveTabProvider>
        <SpacingPaddingSetting attributes={attributes} setAttributes={setAttributes} title={__("Padding", "zenblocks")} initialOpen={false} />
        <SpacingMarginSetting attributes={attributes} setAttributes={setAttributes} title={__("Margin", "zenblocks")} initialOpen={false} />
      </ResponsiveTabProvider>
    </PanelBody>
  );
};

export default ContainerBasic;
