/*
 * Component Definitions are used to create and find components
 */

export const withPosition = defineComponent(
  'Position',
  (position: Position): Position => position
)

export const withRadius = defineComponent(
  'Radius',
  (radius: number): number => radius
)

/*
 * Systems are used to query and modify components.
 */

const createRenderSystem = (app: Application): System => {
  return createSystem({
    id: 'renderSystem',
    update: (ecs, elapsedMS) => {
      /*
       * Query entities that share common components.
       */
      for (const entity of ecs.getEntities(withPosition, withRadius)) {
        const { data: { x, y } } = entity.getComponent(withPosition)
        const { data: radius } = entity.getComponent(withRadius)
        app.drawCircle(x, y, radius)
      }
    }
  })
}

export const createTitleSystem = (onStartGame: () => void): System => {
  return createSystem({
    id: 'TitleSystem',
    update: (ecs) => {
      if (/* input logic */) {
        onStartGame()
      }
    }
  })
}

/*
 * Spaces are used to group entities, components and systems together
 */

export const createTitleSpace = (
  app: Application,
  onStartGame: () => void
): Space => {
  /*
   * Entities are a grouping of components.
   */
  const logo = createEntity('logo')
    .addComponent(createComponent(withPosition, { x: 10, y: 10 }))
    .addComponent(createComponent(withRadius, 5))

  const space = createSpace({ id: 'title' })
  space.addSystem(createRenderSystem(app))
  space.addSystem(createTitleSystem(onStartGame))
  space.addEntity(logo)
  return space
}


export const createBattleSpace = (
  app: Application,
  onBattleEnd: () => void
): Space => {
  // similar to createTitleSpace
}

/*
 * An "app" can be any rendering framework. e.g. pixi.js.
 */
const app = createApp();

/*
 * The Engine decided which systems execute and when.
 */
const engine = createEngine();

/*
 * Let's tie the spaces together so we can transition from one to the other and
 * back.
 */
createTitleSpace(app, () => {
  const battleSpace = createBattleSpace(app, () => {
    engine.removeSystem(battleSpace)
    engine.addSystem(titleSpace)
  })

  engine.removeSystem(titleSpace)
  engine.addSystem(battleSpace)
})

engine.addSystem(titleSpace)

/*
 * Now we can update everything on each tick.
 */
app.ticker.add(() => engine.update(app.ticker.elapsedMS))