<script lang="ts">
	import MySlide from '$lib/MySlide.svelte';
	import { Code, Action } from '@animotion/core';
	import { Canvas } from '@threlte/core';
	import SceneGltf from './SceneGLTF.svelte';

	let code: ReturnType<typeof Code>;

	let step = $state(0);
</script>

<MySlide>
	<div class="mx-10 my-10 w-[600px] flex flex-col items-center justify-start h-full text-3xl">
        <h2 class="text-4xl font-bold text-left w-full">@threlte/gltf</h2>
		<Code
			lang="bash"
			theme="github-dark"
			class="p-4 rounded-md m-4 inline-block w-full"
			code={`npx @threlte/gltf@next Barbarian.glb`}
		/>

		{#if step == 1}
			<h2 class="text-2xl font-semibold text-left w-full">=> autogenerated Barbarian.svelte</h2>

			<Code
				lang="svelte"
				theme="github-light"
				class="p-4 rounded-md m-4 inline-block w-full max-h-[70%] overflow-y-scroll"
				code={`<script>
  import { Group } from 'three'

  import { T } from '@threlte/core'
  import { useGltf, useGltfAnimations } from '@threlte/extras'

  let { fallback, error, children, ref = $bindable(), ...props } = $props()

  ref = new Group()

  const gltf = useGltf('/Barbarian-transformed.glb')

  export const { actions, mixer } = useGltfAnimations(gltf, ref)
<\/script>

<T
  is={ref}
  dispose={false}
  {...props}
>
  {#await gltf}
    {@render fallback?.()}
  {:then gltf}
    <T.Group name="Scene">
      <T.Group name="Rig">
        <T is={gltf.nodes.root} />
        <T.SkinnedMesh
          name="Barbarian_ArmLeft"
          geometry={gltf.nodes.Barbarian_ArmLeft.geometry}
          material={gltf.materials.barbarian_texture}
          skeleton={gltf.nodes.Barbarian_ArmLeft.skeleton}
        />
        <T.SkinnedMesh
          name="Barbarian_ArmRight"
          geometry={gltf.nodes.Barbarian_ArmRight.geometry}
          material={gltf.materials.barbarian_texture}
          skeleton={gltf.nodes.Barbarian_ArmRight.skeleton}
        />
        <T.SkinnedMesh
          name="Barbarian_Body"
          geometry={gltf.nodes.Barbarian_Body.geometry}
          material={gltf.materials.barbarian_texture}
          skeleton={gltf.nodes.Barbarian_Body.skeleton}
        />
        <T.SkinnedMesh
          name="Barbarian_Head"
          geometry={gltf.nodes.Barbarian_Head.geometry}
          material={gltf.materials.barbarian_texture}
          skeleton={gltf.nodes.Barbarian_Head.skeleton}
        />
        <T.SkinnedMesh
          name="Barbarian_LegLeft"
          geometry={gltf.nodes.Barbarian_LegLeft.geometry}
          material={gltf.materials.barbarian_texture}
          skeleton={gltf.nodes.Barbarian_LegLeft.skeleton}
        />
        <T.SkinnedMesh
          name="Barbarian_LegRight"
          geometry={gltf.nodes.Barbarian_LegRight.geometry}
          material={gltf.materials.barbarian_texture}
          skeleton={gltf.nodes.Barbarian_LegRight.skeleton}
        />
      </T.Group>
    </T.Group>
  {:catch err}
    {@render error?.({ error: err })}
  {/await}

  {@render children?.({ ref })}
</T>
`}
			/>
		{:else if step > 1}
			<Code
				bind:this={code}
				lang="svelte"
				theme="github-light"
				class="p-4 rounded-md m-4 inline-block w-full max-h-[70%] overflow-y-scroll"
				code={`<script>
	import Barbarian from "./Barbarian.svelte";
<\/script>

<Barbarian />`}
			/>
		{/if}

		<Action
			do={() => {
				step = 1;
			}}
		/>
		<Action
			do={() => {
				step = 2;
			}}
		/>
		<Action
			do={() => {
				code.update`<script>
    import Barbarian from "./Barbarian.svelte";
<\/script>

<!-- After we did some modifications to Barbarian.svelte -->
<Barbarian currentAction="Walking"/>`;
				step = 3;
			}}
		/>
		<Action
			do={() => {
				code.update`<script>
    import Barbarian from "./Barbarian.svelte";
<\/script>

<!-- After we did some modifications to Barbarian.svelte -->
<Barbarian currentAction="Walking" leftHand="Axe"/>`;
				step = 4;
			}}
		/>

		<Action
        do={() => {
            code.update`<script>
    import Barbarian from "./Barbarian.svelte";
<\/script>

<!-- After we did some modifications to Barbarian.svelte -->
<Barbarian currentAction="Walking" leftHand="Axe" rightHand="Mug"/>`;
            step = 5;
        }}
    />
	</div>

	<div class="w-1/2 h-full absolute top-0 bottom-0 right-0">
		{#if step > 1}
			<Canvas>
				<SceneGltf {step} />
			</Canvas>
		{/if}
	</div>
</MySlide>
