import Phaser from 'phaser'
import GamblingManager from '../manager/gamblingmanager'

class BetGroup extends Phaser.GameObjects.Group {
  constructor (scene) {
    super(scene)

    this.add(new BetBtn(
      scene,
      this,
      scene.game.canvas.width / 2,
      scene.game.canvas.height / 2 + 230
    ), true)

    this.radios = {}
    this.currentRadioChoice = ''

    const radioBaseY = scene.game.canvas.height / 2 + 100
    const radioBaseX = 150
    const radioSpacing = 150

    createRadioBtn(
      '1',
      this,
      scene,
      radioBaseX + 0 * radioSpacing, // scene.game.canvas.width / 2 - 150,
      radioBaseY,
      '1$',
      function () {
        if (GamblingManager.gold === 0) return 0
        else return 1
      }
    )
    createRadioBtn(
      '10',
      this,
      scene,
      radioBaseX + 1 * radioSpacing, // scene.game.canvas.width / 2 - 100,
      radioBaseY,
      '10 $',
      function () {
        if (GamblingManager.gold === 0) return 0
        else return 10
      }
    )
    createRadioBtn(
      'half',
      this,
      scene,
      radioBaseX + 2 * radioSpacing, // scene.game.canvas.width / 2 - 50,
      radioBaseY,
      'Half',
      function () {
        if (GamblingManager.gold === 0) return 0
        else if (GamblingManager.gold === 1) return 1
        else return Math.floor(GamblingManager.gold / 2)
      }
    )

    createRadioBtn(
      'all',
      this,
      scene,
      radioBaseX + 3 * radioSpacing, // scene.game.canvas.width / 2 + 0,
      radioBaseY,
      'All',
      function () {
        return GamblingManager.gold
      }
    )

    this.onRadioChanged('1')
    this.hide()
  }

  onRadioChanged (rid, e) {
    this.currentRadioChoice = rid
    for (const k in this.radios) {
      if (k === rid) {
        this.radios[k].img.setFrame(0)
      } else {
        this.radios[k].img.setFrame(1)
      }
    }
  }

  getRadioChoiceCB () {
    return this.radios[this.currentRadioChoice].cb
  }

  getBet () {
    return this.getRadioChoiceCB()()
  }

  show () {
    this.setAlpha(1)
  }

  hide () {
    this.setAlpha(0)
  }
}

function createRadioBtn (rid, group, scene, x, y, text, cb) {
  const img = new Phaser.GameObjects.Sprite(
    scene, x, y,
    'radio'
  )
  img.setOrigin(0.5, 0.5)

  const textObj = new Phaser.GameObjects.Text(
    scene,
    img.x,
    img.y + 25,
    text,
    {
      fontSize: '14px',
      fontFamily: 'Arial',
      align: 'center',
      color: '#eee'
    }
  ).setOrigin(0.5, 0)

  textObj.setInteractive()
  img.setInteractive()

  textObj.on('pointerup', (e) => {
    group.onRadioChanged(rid, e)
  })
  img.on('pointerup', (e) => {
    group.onRadioChanged(rid, e)
  })

  group.add(img, true)
  group.add(textObj, true)

  group.radios[rid] = {
    img: img,
    text: textObj,
    cb: cb
  }
}

class BetBtn extends Phaser.GameObjects.Sprite {
  constructor (scene, group, x, y) {
    super(
      scene, x, y,
      'bet',
      0
    )
    this.setOrigin(0.5, 0.5)
    this.setInteractive()

    this.on('pointerover', (e) => {
      this.setFrame(1)
    })

    this.on('pointerout', (e) => {
      this.setFrame(0)
      this.setScale(1.0)
    })

    this.on('pointerdown', (e) => {
      this.setScale(0.8)
    })

    this.on('pointerup', (e) => {
      this.setScale(1.0)

      if (group.getBet() <= GamblingManager.gold) {
        GamblingManager.playGame()
      }
    })
  }
}

export default BetGroup
