declare const enum CameraType {
    CT_FIRST_PERSON = 0,
    CT_THIRD_PERSON = 1,
+    /** CT_CINEMATIC - controlled by the scene */
+    CT_CINEMATIC = 2
}

interface PBCameraModeArea {
    /** the 3D size of the region */
    area: Vector3 | undefined;
    /** the camera mode to enforce */
    mode: CameraType;
+    cinematicSettings?: CinematicSettings | undefined;
+    /** if true, the player will be considered inside the area when they are within 0.3m of the area. default true */
+    useColliderRange?: boolean | undefined;
}

+interface CinematicSettings {
+    /** Entity that defines the cinematic camera transform. */
+    cameraEntity: number;
+    /**
+     * Position -> camera's position
+     * Rotation -> camera's direction
+     * scale.z -> zoom level
+     * scale.x and scale.y -> unused
+     */
+    allowManualRotation?: boolean | undefined;
+    /** how far the camera can rotate around the y-axis / look left/right, in radians. default unrestricted */
+    yawRange?: number | undefined;
+    /** how far the camera can rotate around the x-axis / look up-down, in radians. default unrestricted */
+    pitchRange?: number | undefined;
+    /** note: cameras can never look up/down further than Vec3::Y */
+    rollRange?: number | undefined;
+    /** minimum zoom level. must be greater than 0. defaults to the input zoom level */
+    zoomMin?: number | undefined;
+    /** maximum zoom level. must be greater than 0. defaults to the input zoom level */
+    zoomMax?: number | undefined;
+}

interface PBAvatarModifierArea {
    /** the 3D size of the region */
    area: Vector3 | undefined;
    /** user IDs that can enter and remain unaffected */
    excludeIds: string[];
    /** list of modifiers to apply */
    modifiers: AvatarModifierType[];
+    movementSettings?: AvatarMovementSettings | undefined;
+    /** if true, the player will be considered inside the area when they are within 0.3m of the area. default true */
+    useColliderRange?: boolean | undefined;
}

+interface AvatarMovementSettings {
+    controlMode?: AvatarControlType | undefined;
+    /** if not explicitly set, the following properties default to user's preference settings */
+    runSpeed?: number | undefined;
+    /** how fast the player gets up to speed or comes to rest. higher = more responsive */
+    friction?: number | undefined;
+    /** how fast the player accelerates vertically when not on a solid surface, in m/s. should normally be negative */
+    gravity?: number | undefined;
+    /** how high the player can jump, in meters. should normally be positive. gravity must have the same sign for jumping to be possible */
+    jumpHeight?: number | undefined;
+    /** max fall speed in m/s. should normally be negative */
+    maxFallSpeed?: number | undefined;
+    /** speed the player turns in tank mode, in radians/s */
+    turnSpeed?: number | undefined;
+    /** speed the player walks at, in m/s */
+    walkSpeed?: number | undefined;
+    /** whether to allow player to move at a slower speed (e.g. with a walk-key or when using a gamepad/joystick). defaults to true */
+    allowWeightedMovement?: boolean | undefined;
+}

import { CameraModeArea, CameraType, engine, Entity, Material, MeshRenderer, PBCameraModeArea, Transform } from "@dcl/sdk/ecs";
import { Color3, Color4, Quaternion, Scalar, Vector3 } from "@dcl/sdk/math";

function colorAddAlpha(baseColor: Color4 | Color3, a: number): Color4 {
  return { ...baseColor, a }
}

function createCameraModeArea(position: Vector3, size: Vector3, value: Partial<PBCameraModeArea>, debug: boolean = true) {
  // When debug=true, it enables a box with alpha representation
  if (debug) {
      const height = 0.1
      const floorRepresentationEntity = engine.addEntity()
      const floorPosition = Vector3.create(position.x, position.y - size.y / 2 + height, position.z)
      MeshRenderer.setBox(floorRepresentationEntity)
      Material.setPbrMaterial(floorRepresentationEntity, { albedoColor: colorAddAlpha(Color4.Magenta(), 0.2) })
      Transform.create(floorRepresentationEntity, { position: floorPosition, scale: Vector3.create(size.x, height, size.z) })

      const areaRepresentationEntity = engine.addEntity()
      MeshRenderer.setBox(areaRepresentationEntity)
      Material.setPbrMaterial(areaRepresentationEntity, { albedoColor: colorAddAlpha(Color4.Green(), 0.1) })
      const repPosition = Vector3.create(position.x, position.y, position.z)
      Transform.create(areaRepresentationEntity, { position: repPosition, scale:  size})
  }

  const entity = engine.addEntity()
  CameraModeArea.create(entity, {
      mode: CameraType.CT_FIRST_PERSON,
      area: size,
      ...value,
  })
  Transform.create(entity, { position })
}

function createLemniscateMovement(centerPosition: Vector3, height: number, pathLength: number, periodSeg: number = 1.0, showDebug: boolean = false): Entity {
  const movingEntity = engine.addEntity()
  const systemName = `${movingEntity}-bernoulli-lemniscate-curve-movement-system`
  const speedModifier = 2 * Math.PI / periodSeg

  // A small debug box to show the position of the entity moved and the boundary of the path
  if (showDebug) {
      const debug = engine.addEntity()
      const debugBoxSize = 0.1
      MeshRenderer.setBox(debug)
      Material.setPbrMaterial(debug, { albedoColor: Color4.Red() })
      Transform.create(debug, { scale: Vector3.create(debugBoxSize, debugBoxSize, debugBoxSize), parent: movingEntity })

      const debugArea = engine.addEntity()
      MeshRenderer.setBox(debugArea)
      Material.setPbrMaterial(debugArea, { albedoColor: colorAddAlpha(Color4.Magenta(), 0.2) })
      Transform.create(debugArea, { scale: Vector3.create(pathLength, height, pathLength * Math.sqrt(2) / 4), position: {...centerPosition} })
  }
  
  let t = 0
  const amplitude = pathLength / 2
  engine.addSystem((dt) => {
      const transform = Transform.getMutableOrNull(movingEntity)
      // auto clean
      if (!transform) {
          engine.removeSystem(systemName)
          return
      }

      // t is acummulated time but periodic each 2pi
      t = Scalar.repeat(t + (speedModifier * dt), 2 * Math.PI)
      const ct = Math.cos(t)
      const st = Math.sin(t)
      const previousPos = {...transform.position}

      // lemminiscate curve
      transform.position.x = centerPosition.x + (amplitude * ct / (1 + (st * st)))
      transform.position.z = centerPosition.z + (amplitude * ct * st / (1 + (st * st)))

      // sin square 
      transform.position.y = centerPosition.y - height / 2 + (height * Math.sin(t/2) * Math.sin(t/2))

      // rotation calculated from the previous position (with forward vector)
      Quaternion.fromLookAtToRef(previousPos, transform.position, Vector3.Up(), transform.rotation)
  }, 0, systemName)

  // Initial position
  Transform.create(movingEntity, { position: {...centerPosition} })

  return movingEntity
}

export function main() {
  console.log("## Cinematic Example Test ##")

  // Camera area position and size
  const cameraAreaPosition = Vector3.create(4, 2.5, 4)
  const cameraAreaSize = Vector3.create(3, 3, 3)

  // Movement parameters
  const movementCenteredPosition = Vector3.create(8, 2, 8)
  const pathHeight = 1.0
  const pathLength = 4.0
  const periodSeg = 6

  const movingEntity = createLemniscateMovement(movementCenteredPosition, pathHeight, pathLength, periodSeg, true)
  createCameraModeArea(cameraAreaPosition, cameraAreaSize, {
      mode: CameraType.CT_CINEMATIC,
      cinematicSettings: {
          cameraEntity: movingEntity
      }
  })
}

+/**
+ * @public
+ * The scroll-visible determines if the scrollbars are shown when the scroll overflow is enabled
+ */
+export type ScrollVisibleType = 'horizontal' | 'vertical' | 'both' | 'hidden'

export interface UiTransformProps {
    ...,
+  /** A reference value to identify the element, default empty */
+  elementId?: string
+  /** default position=(0,0) if it aplies, a vector or a reference-id */
+  scrollPosition?: Vector2 | string
+  /** default ShowScrollBar.SSB_BOTH */
+  scrollVisible?: ScrollVisibleType
}

import ReactEcs, { Label, UiEntity } from '@dcl/react-ecs'
import { UiScrollResult, UiTransform, engine } from '@dcl/sdk/ecs'
import { Color4 } from '@dcl/sdk/math'
import { Button, Input, ReactEcsRenderer } from '@dcl/sdk/react-ecs'
import { type Vector2 } from '~system/EngineApi'

class UiExample {
  // autoincrement counter, only for demonstration purposes
  private counter: number = 0
  // target for scroll position
  private target: string | Vector2 = { x: 0.5, y: 0.5 }
  // text to display in the scroll controller
  private scrollText = 'indeterminated'
  // id of the scroll container, to identify it in the controller
  private readonly scrollContainerId = 'my-scroll-container-A'

  constructor() {
  	engine.addSystem(this.controllerSystem.bind(this))
  }

  controllerSystem(): void {
  	for (const [, pos, uiTransform] of engine.getEntitiesWith(
  		UiScrollResult,
  		UiTransform
  	)) {
  		if (uiTransform.elementId !== this.scrollContainerId) {
  			continue
  		}

  		if (pos.value === undefined) {
  			break
  		}

  		if (pos.value.y <= 0) {
  			this.scrollText = 'top'
  		} else if (pos.value.y >= 1) {
  			this.scrollText = 'bottom'
  		} else if (pos.value.y < 0.5) {
  			this.scrollText = 'near top'
  		} else {
  			this.scrollText = 'near bottom'
  		}

  		if (pos.value.x <= 0) {
  			this.scrollText += ' left'
  		} else if (pos.value.x >= 1) {
  			this.scrollText += ' right'
  		} else {
  			this.scrollText += ' middle'
  		}
  	}

  	this.counter++
  }

  // This UI is only for demonstration purposes, not the focus of this example
  ScrollController(): ReactEcs.JSX.Element {
  	return (
  		<UiEntity
  			uiTransform={{
  				flexDirection: 'column',
  				position: { left: '25%', top: '10%' },
  				width: '200',
  				height: '300',
  				justifyContent: 'space-evenly',
  				alignItems: 'center'
  			}}
  			uiBackground={{ color: Color4.create(0.0, 0.0, 0.0, 1.0) }}
  		>
  			<Label value="Scroll controller" color={Color4.Green()} fontSize={14} />
  			<Button
  				fontSize={16}
  				uiTransform={{ width: '80%' }}
  				value="Focus first item"
  				onMouseDown={() => {
  					this.target = 'first'
  				}}
  			/>
  			<Button
  				fontSize={16}
  				uiTransform={{ width: '80%' }}
  				value="Focus second item"
  				onMouseDown={() => {
  					this.target = 'second'
  				}}
  			/>
  			<Label
  				fontSize={16}
  				value={`Currently:\n${this.scrollText}`}
  				color={Color4.White()}
  			/>

  			<Input
  				fontSize={16}
  				uiTransform={{ width: '90%' }}
  				placeholder="type target"
  				onChange={(value) => {
  					console.log(`change ${value}`)
  					this.target = value
  				}}
  				onSubmit={(value) => {
  					console.log(`submit ${value}`)
  					this.target = value
  				}}
  			/>
  		</UiEntity>
  	)
  }

  Scrolly(): ReactEcs.JSX.Element {
  	return (
  		<UiEntity
  			uiTransform={{
  				flexDirection: 'column',
  				alignItems: 'center',
  				justifyContent: 'space-between',
  				positionType: 'absolute',
  				width: '400',
  				height: '600',
  				position: { right: '8%', bottom: '3%' },

  				// new properties
  				overflow: 'scroll', // enable scrolling
  				scrollPosition: this.target, // if you want to set the scroll position programatically (maybe an action from the user)
  				elementId: this.scrollContainerId // id to identify the scroll result if you need to
  			}}
  			uiBackground={{
  				color: Color4.White()
  			}}
  		>
  			<Label
  				uiTransform={{
  					height: 'auto',
  					width: 'auto',
  					margin: '200px',
  					padding: `10px`,
  					// new property: we set the id, it must be unique, and we will use it to identify the scroll position
  					elementId: 'first'
  				}}
  				value={`first (${this.counter})`}
  				color={Color4.Black()}
  				fontSize={18}
  				textAlign="middle-center"
  				key="first"
  			/>
  			<Label
  				uiTransform={{
  					height: 'auto',
  					width: 'auto',
  					margin: '200px',
  					padding: `10px`,
  					// new property: we set the id, it must be unique, and we will use it to identify the scroll position
  					elementId: 'second'
  				}}
  				value="second"
  				color={Color4.Black()}
  				fontSize={18}
  				textAlign="middle-center"
  			/>
  			<Label
  				uiTransform={{
  					height: 'auto',
  					width: 'auto',
  					margin: '200px',
  					padding: `10px`,
  					// new property: we set the id, it must be unique, and we will use it to identify the scroll position
  					elementId: 'third'
  				}}
  				value="third"
  				color={Color4.Black()}
  				fontSize={18}
  				textAlign="middle-center"
  			/>
  			<Label
  				uiTransform={{
  					height: 'auto',
  					width: 'auto',
  					margin: '200px',
  					padding: `10px`,
  					// new property: we set the id, it must be unique, and we will use it to identify the scroll position
  					elementId: 'fourth'
  				}}
  				value="fourth"
  				color={Color4.Black()}
  				fontSize={18}
  				textAlign="middle-center"
  			/>
  			<Label
  				uiTransform={{
  					height: 'auto',
  					width: 'auto',
  					margin: '200px',
  					padding: `10px`,
  					// new property: we set the id, it must be unique, and we will use it to identify the scroll position
  					elementId: 'fifth'
  				}}
  				value="fifth"
  				color={Color4.Black()}
  				fontSize={18}
  				textAlign="middle-center"
  			/>
  		</UiEntity>
  	)
  }

  render(): ReactEcs.JSX.Element[] {
  	return [this.Scrolly(), this.ScrollController()]
  }
}

export function main(): void {
  const ui = new UiExample()
  ReactEcsRenderer.setUiRenderer(ui.render.bind(ui))
}

export interface PBGltfContainerLoadingState {
+    animationNames: string[];
    currentState: LoadingState;
+    materialNames: string[];
+    meshNames: string[];
+    nodePaths: string[];
+    skinNames: string[]; // @deprecated this will not be finally used
}

export interface PBMaterial {
+    gltf?: PBMaterial_GltfMaterial | undefined;
    material?: {
        $case: "unlit";
        unlit: PBMaterial_UnlitMaterial;
    } | {
        $case: "pbr";
        pbr: PBMaterial_PbrMaterial;
    } | undefined;
}

+ MeshRenderer.setGltfMesh(...)

+  /**
+   * @public
+   * Set a gltf internal mesh in the MeshCollider component
+   * @param entity - entity to create or replace the MeshRenderer component
+   * @param source - the path to the gltf
+   * @param meshName - the name of the mesh in the gltf
+   */
+  setGltfMesh(entity: Entity, source: string, meshName: string, colliderLayers?: ColliderLayer | ColliderLayer[]): void

+ MeshCollider.setGltfMesh(...)

+  /**
+   * @public
+   * Set a gltf internal mesh in the MeshCollider component
+   * @param entity - entity to create or replace the MeshCollider component
+   * @param source - the path to the gltf
+   * @param meshName - the name of the mesh in the gltf
+   * @param colliderMask - the set of layer where the collider reacts, default: Physics and Pointer
+   */
+  setGltfMesh(entity: Entity, source: string, meshName: string, colliderLayers?: ColliderLayer | ColliderLayer[]): void

+export interface PBGltfNode {
+    path: string;
+}
+export interface PBGltfNodeState {
+    error?: string | undefined;
+    state: GltfNodeStateValue;
+}
+export const enum GltfNodeStateValue {
+    GNSV_FAILED = 1,
+    GNSV_PENDING = 0,
+    GNSV_READY = 2
+}

+ export interface PBUiCanvas {
+    color?: PBColor4 | undefined;
+    height: number;
+    width: number;
+ }

export interface TextureUnion {
    // (undocumented)
    tex?: {
        $case: "texture";
        texture: Texture;
    } | {
        $case: "avatarTexture";
        avatarTexture: AvatarTexture;
    } | {
        $case: "videoTexture";
        videoTexture: VideoTexture;
+    } | {
+        $case: "uiTexture";
+        uiTexture: UiCanvasTexture;
    } | undefined;
}

+ interface ReactEcsRenderer {
+     setTextureRenderer: (entity, ui) => void
+ }

+export interface PBLight {
+    color?: PBColor3 | undefined;
+    enabled?: boolean | undefined;
+    illuminance?: number | undefined;
+    shadows?: boolean | undefined;
+}

+export interface PBSpotlight {
+    angle: number;
+    innerAngle?: number | undefined;
+}

+export interface PBGlobalLight {
+    ambientBrightness?: number | undefined;
+    ambientColor?: PBColor3 | undefined;
+    direction?: PBVector3 | undefined;
+}