import { SceneViewer } from "@iot-app-kit/scene-composer";
import {
  ButtonStyle,
  useOverrideTags,
  DirectSceneLoader,
} from "@iak-extra/scene-composer-extra";

function App() {
  // TwinMakerの定義ファイルをpublicに配置する
  const sceneLoader = new DirectSceneLoader("/single-content.json");

  /** TwinMakerをカスタマイズするコントローラー */
  const controller = useOverrideTags({
    // tag-name-buttonのタグを、ボタンに置き換える
    "tag-name-button": (replaceTag) =>
      replaceTag.toButton
        ?.create({
          angle: 0, // 角度（単位はdegree）
          content: "Close", // ボタンに表示するテキスト
          width: 0.7,
          height: 0.24,
          stateStyle: ButtonStyle.Standard, // ボタンの色を設定する
        })
        .onClickEvent(() => {
          // クリック操作を受けたときのイベントハンドラ
          console.log("clicked: 閉じる");
        }),
  });
  return (
    <div className="App">
      <SceneViewer
        sceneComposerId={controller.composerId}
        sceneLoader={sceneLoader}
        activeCamera="Camera1"
      />
    </div>
  );
}