import { SceneViewer } from "@iot-app-kit/scene-composer";
import {
  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-text": (replaceTag) =>
      replaceTag.toText
        ?.create({
          angle: 0, // 角度（単位はdegree）
          content: "Text", // ボタンに表示するテキスト
        })
        .onAnimating((text) => {
          // 毎フレーム呼び出される関数
          // text（ThreeMeshUiのテキストクラス）のsetを呼び出して、表示テキストを動的に更新できる
          (text as any).set({
            content: new Date().toISOString().split(".")[0],
          });
        }),
  });

  return (
    <div className="App">
      <SceneViewer
        sceneComposerId={controller.composerId}
        sceneLoader={sceneLoader}
        activeCamera="Camera1"
      />
    </div>
  );
}