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

// 背景設定用モジュール
import BackgroundColorSettingV2 from "../../settings-modules/background/BackgroundColorSettingV2";
import BackgroundImageSettingV2 from "../../settings-modules/background/BackgroundImageSettingV2";
import BackgroundPatternSetting from "../../settings-modules/background/BackgroundPatternSetting";

/**
 * 背景設定コンポーネント
 *
 * @param {Object} props コンポーネントのプロパティ
 * @param {Object} props.attributes ブロックの属性
 * @param {Function} props.setAttributes 属性を更新する関数
 * @param {string} props.title パネルのタイトル
 * @param {boolean} props.initialOpen パネルの初期状態
 * @returns {JSX.Element} 背景設定パネル
 */
const BackgroundBasic = ({ attributes, setAttributes, title = __("背景設定", "zenblocks"), initialOpen = false }) => {
  return (
    <PanelBody title={title} initialOpen={initialOpen}>
      <ResponsiveTabProvider>
        <BackgroundColorSettingV2 attributes={attributes} setAttributes={setAttributes} title={__("カラー", "zenblocks")} initialOpen={false} />
        <BackgroundImageSettingV2 attributes={attributes} setAttributes={setAttributes} title={__("イメージ", "zenblocks")} initialOpen={false} />
        <BackgroundPatternSetting attributes={attributes} setAttributes={setAttributes} title={__("パターン", "zenblocks")} initialOpen={false} />
      </ResponsiveTabProvider>
    </PanelBody>
  );
};

export default BackgroundBasic;
