import { createContainer } from '@/common/helpers'
import type {
  Dimension,
  GameSummary,
  MatchSessionDto,
  MatchSessionOptions,
} from '@/common/interfaces'
import { EventEmitter, Point, type Application, type Container } from 'pixi.js'
import { createText, whiteStyle, yellowStyle } from './utilities/fonts'
import { t } from '@/i18n'
import { TimedButton } from './TimedButton'

export class GameSummayView extends EventEmitter {
  public width: number
  public height: number
  container!: Container
  layer!: Container
  gameSummary!: GameSummary
  matchState!: MatchSessionDto
  type: 'round' | 'match' = 'round'

  constructor(
    app: Application,
    private options: MatchSessionOptions,
  ) {
    super()
    this.width = 500
    this.height = 400
    this.container = createContainer({
      width: this.width,
      height: this.height,
      x: app.canvas.width / 2 - this.width / 2,
      y: app.canvas.height / 2 - this.height / 2,
      parent: app.stage,
      alpha: 0.7,
      color: 0x121212,
    })
    this.layer = createContainer({
      width: this.width,
      height: this.height,
      parent: this.container,
    })
    this.container.visible = false
  }

  setGameSummary(data: any, type: 'round' | 'match') {
    this.type = type
    this.matchState = data.sessionState
    this.gameSummary = data.lastGame
    this.render()
    this.container.visible = true
  }

  renderTitle(y: number = 20, title: string): number {
    const text = createText({
      text: title,
      x: this.width / 2,
      y,
      style: yellowStyle(24),
    })
    this.layer.addChild(text)
    return y + 24
  }

  renderWinner(y: number): number {
    let line = y + 12
    this.layer.addChild(
      createText({
        text: t('winner-name', [this.gameSummary.winner.name]),
        x: this.width / 2,
        y: line,
        style: whiteStyle(20),
      }),
    )

    if (this.gameSummary.isBlocked) {
      line += 30
      this.layer.addChild(
        createText({
          text: `(${t('blocked')})`,
          x: this.width / 2,
          y: line,
          style: whiteStyle(),
        }),
      )
    }

    if (this.options.winType === 'points') {
      line += 30
      this.layer.addChild(
        createText({
          text: `Points this round: ${this.gameSummary.winner.score}`,
          // text: `Points this round: ${this.gameSummary.winner.score}, needed to win: ${this.options.winTarget}`,
          x: this.width / 2,
          y: line,
          style: whiteStyle(20),
        }),
      )
    }
    // } else if (this.options.winType === 'rounds') {
    //   line += 30
    //   this.layer.addChild(
    //     createText({
    //       text: `Rounds needed to win: ${this.options.winTarget}`,
    //       x: this.width / 2,
    //       y: line,
    //       style: whiteStyle(20),
    //     }),
    //   )
    // }
    return line + 16
  }

  renderScores(y: number): number {
    const scores = this.matchState.scoreboard
    // this.type === 'round'
    //   ? this.gameSummary.score
    //   : this.matchState.scoreboard.map((d) => ({ name: d[0], score: d[1] }))
    let line = y + 30
    scores.forEach((score: any) => {
      line = line + 30
      this.layer.addChild(
        createText({
          text: `${score.name}:`,
          x: 130,
          y: line,
          style: whiteStyle(18),
          align: 'left',
        }),
      )
      this.layer.addChild(
        createText({
          text: `${score.score}`,
          x: 330,
          y: line,
          style: whiteStyle(18),
          align: 'right',
        }),
      )
    })
    return line
  }

  renderButtons() {
    const x = this.width / 2 - 25
    const y = this.height - 55
    const d: Dimension = { x, y, width: 90, height: 30 }
    const text = this.type === 'round' ? 'Next' : 'Finish'
    const event = this.type === 'round' ? 'nextClick' : 'finishClick'
    const action = () => {
      this.emit(event, { sessionState: this.matchState })
      this.container.visible = false
    }
    const btn: TimedButton = new TimedButton(text, new Point(x, y), d, action, 30)

    btn.on('timeout', action)
    this.layer.addChild(btn)
    btn.start()
  }

  render() {
    const title: string = this.type === 'round' ? t('round-summary') : t('match-finished')
    this.layer.removeChildren()
    let y = this.renderTitle(30, title.toUpperCase())
    y = this.renderWinner(y)
    this.renderScores(y)
    this.renderButtons()
  }
}
