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-mmdのタグを、publicに配置したMMDファイルと置き換える
    "tag-name-mmd": (replaceTag) =>
      replaceTag.toMMD
        ?.create({
          angle: 0, // 表示角度（単位: degree）
          scale: 0.08, // MMDの表示サイズ
          // MMDのモデルデータを読み込む
          pmxPath: "/mmd/UsadaPekora/PMX/UsadaPekora.pmx",
          // アニメーションデータを読み込む
          useMotionList: {
            "animation-name-1": "/mmd/Alicia/MMD Motion/2分ループステップ1.vmd",
          },
        })
        // タグの色が変わったことの通知を受け取る
        .onStateChangeEvent((mesh, model, state) => {
          // state（タグの色）の状態に応じたアニメーションデータ名を返却すると、
          // useMotionListで読み込んだアニメーションデータを再生する
          // 配列で複数渡すと、同時に再生する
          return ["animation-name-1"];
        }),
  });

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