import drawImage, { Sprite } from "../util/drawImage";

let isInitialed = false
let progress_bar_p
let progress_bg_bar_width
let progress_bar_startX
let progress_bar_endX
let drawing = true
let canvas
let context

let img_bg_white = new Sprite('images/bg@3x.png')
let img_bg_loading = new Sprite('images/loading/bg_loading@2x.png')
let img_text_online = new Sprite('images/loading/text_online@2x.png')
let img_text_loading = new Sprite('images/loading/text_loading@2x.png')
let img_bg_progress = new Sprite('images/loading/bg_progress@2x.png')
let img_progress_10 = new Sprite('images/loading/progress_10@2x.png')
let img_progress_20 = new Sprite('images/loading/progress_20@2x.png')
let img_progress_30 = new Sprite('images/loading/progress_30@2x.png')
let img_progress_40 = new Sprite('images/loading/progress_40@2x.png')
let img_progress_50 = new Sprite('images/loading/progress_50@2x.png')
let img_progress_60 = new Sprite('images/loading/progress_60@2x.png')
let img_progress_70 = new Sprite('images/loading/progress_70@2x.png')
let img_progress_80 = new Sprite('images/loading/progress_80@2x.png')
let img_progress_90 = new Sprite('images/loading/progress_90@2x.png')
let img_progress_100 = new Sprite('images/loading/progress_100@2x.png')
let img_text_copyright = new Sprite('images/loading/text_copyright@2x.png')

const loading = (proccess_percent) => {


  console.log(`loading percent: ${proccess_percent}, is drawing: ${drawing}`)
  if (drawing) {
    canvas = wx.createCanvas()
    canvas.width = screenWidth
    canvas.height = screenHeight
    context = canvas.getContext('2d')
    console.log('loading init')
    let d_bg_white = img_bg_white.render(context, 0, 0, screenWidth, screenHeight)
    let d_bg_loading = img_bg_loading.render(context, 0, 0, screenWidth, screenHeight)
    let d_text_online = img_text_online.render(context, screenWidth / 2, screenHeight * .2, 'center, middle')
    let d_text_loading = img_text_loading.render(context, screenWidth / 2, screenHeight * .6, 'center, middle')
    let d_bg_progress = img_bg_progress.render(context, screenWidth / 2, screenHeight * .75, 'center, middle')

    progress_bg_bar_width = d_bg_progress.width
    progress_bar_startX = d_bg_progress.startX

    let d_progress_10 = img_progress_10.render(context, d_bg_progress.startX + 2, d_bg_progress.startY + d_bg_progress.height / 2, 'left, middle')
    progress_bar_p = d_progress_10
    let d_text_copyright = img_text_copyright.render(context, screenWidth / 2, screenHeight * .9, 'center, middle')
    GameGlobal.canvas.getContext('2d').drawImage(canvas, 0, 0)
    isInitialed = true
    drawing = false

    // return drawImage(context, 'images/bg@3x.png', 0, 0, screenWidth, screenHeight).then((dimension) => {
    //   return drawImage(context, 'images/loading/bg_loading@2x.png', 0, 0, screenWidth, screenHeight)
    // }).then((dimension) => {
    //   console.log(`bg loading ${dimension.width}, ${dimension.height}`)
    //   return drawImage(context, 'images/loading/text_online@2x.png', screenWidth / 2, screenHeight * .2, 'center, middle')
    // }).then((dimension) => {
    //   return drawImage(context, 'images/loading/text_loading@2x.png', screenWidth / 2, screenHeight * .6, 'center, middle')
    // }).then((dimension) => {
    //   return drawImage(context, 'images/loading/bg_progress@2x.png', screenWidth / 2, screenHeight * .75, 'center, middle')
    // }).then((dimension) => {
    //   progress_bg_bar_width = dimension.width
    //   progress_bar_startX = dimension.startX
    //   return drawImage(context, 'images/loading/progress_10@2x.png', dimension.startX + 2, dimension.startY + dimension.height / 2, 'left, middle')
    // }).then((dimension) => {
    //   progress_bar_p = dimension
    //   return drawImage(context, 'images/loading/text_copyright@2x.png', screenWidth / 2, screenHeight * .9, 'center, middle')
    // }).then((dimension) => {
    //   isInitialed = true
    //   drawing = false
    //   console.log('loading done')
    //   GameGlobal.canvas.getContext('2d').drawImage(canvas, 0, 0)
    //   return dimension
    // })
  } else {
    // return drawImage(context, 'images/loading/bg_loading@2x.png', 0, 0, screenWidth, screenHeight).then((dimension) => {
    //   console.log(`bg loading ${dimension.width}, ${dimension.height}`)
    //   return drawImage(context, 'images/loading/text_online@2x.png', screenWidth / 2, screenHeight * .2, 'center, middle')
    // }).then((dimension) => {
    //   return drawImage(context, 'images/loading/text_loading@2x.png', screenWidth / 2, screenHeight * .6, 'center, middle')
    // }).then((dimension) => {
    //   return drawImage(context, 'images/loading/bg_progress@2x.png', screenWidth / 2, screenHeight * .75, 'center, middle')
    // }).then((dimension) => {
    //   progress_bg_bar_width = dimension.width
    //   return drawImage(context, 'images/loading/progress_10@2x.png', dimension.startX + 2, dimension.startY + dimension.height / 2, 'left, middle')
    // }).then((dimension) => {
    //   progress_bar_p = dimension
    //   return drawImage(context, 'images/loading/text_copyright@2x.png', screenWidth / 2, screenHeight * .9, 'center, middle')
    // }).then((dimension) => {
    //   console.log('loading done')
    //   return dimension
    // }).then(() => {
    let base_progress_bar = img_progress_10
    progress_bar_endX = progress_bg_bar_width ? progress_bar_startX + proccess_percent / 100 * progress_bg_bar_width : progress_bar_p.endX + proccess_percent
    if (progress_bar_endX <= progress_bar_p.endX) {
      progress_bar_endX = progress_bar_p.endX
    } else if (progress_bar_endX - progress_bar_p.endX > progress_bar_p.width && progress_bg_bar_width) { //避免进度条断裂
      let diff = progress_bar_endX - progress_bar_p.endX
      let delta_percent = Math.ceil(diff / progress_bg_bar_width * 10) * 10
      switch (delta_percent){
        case 10:
          base_progress_bar = img_progress_10
          break;
        case 20:
          base_progress_bar = img_progress_20
          break;
        case 30:
          base_progress_bar = img_progress_30
          break;
        case 40:
          base_progress_bar = img_progress_40
          break;
        case 50:
          base_progress_bar = img_progress_50
          break;
        case 60:
          base_progress_bar = img_progress_60
          break;
        case 70:
          base_progress_bar = img_progress_70
          break;
        case 80:
          base_progress_bar = img_progress_80
          break;
        case 90:
          base_progress_bar = img_progress_90
          break;
        case 100:
          base_progress_bar = img_progress_100
          break;
      }
    }
    progress_bar_p = base_progress_bar.render(context, progress_bar_endX, progress_bar_p.startY, 'right')
    GameGlobal.canvas.getContext('2d').drawImage(canvas, 0, 0)
    // return drawImage(GameGlobal.canvas.getContext('2d'), base_progress_bar, progress_bar_endX, progress_bar_p.startY, 'right').then((dimension) => {
    //   progress_bar_p = {...dimension}
    //   // GameGlobal.canvas.getContext('2d').drawImage(canvas, 0, 0)
    //   return dimension
    // })

    // })
  }
}
export default loading