import drawImage from '../util/drawImage.js'
import {
FLDsource,
FLDbtnArea,
FLDbtnAreaOffset,
SLDArea,
TopArea,
SearchButtonArea,
ExitBtnArea,
setBaseCanvas,
setBaseContext
} from '../conf/data.js'
import drawText from '../util/drawText.js';

let header_height

/*
画两边的灰色选择栏和下一页按钮
*/
function basePage(context, serachTerm, isAgent, active_category, active_style, set_price) {

  let canvas = wx.createCanvas()
  canvas.width = screenWidth
  canvas.height = screenHeight
  context = canvas.getContext('2d')
  setBaseCanvas(canvas)
  setBaseContext(context)
  return drawImage(context, "images/bg@3x.png", 0, 0, screenWidth, screenHeight).then(() => {

    return header(context, serachTerm)
  }).then(() => {
    return logo(context)
  }).then(() => {

    return leftNav(context, active_style, isAgent, set_price)
  }).then(() => {

    return rightNav(context, active_category)
  }).then(() => {
    GameGlobal.canvas.getContext('2d').drawImage(canvas, 0, 0)
    return { height: header_height }
  }) 
}
function header(context, serachTerm) {
  return drawImage(context, 'images/homepage/bg_top@2x.png', 0, 0, screenWidth).then((dimension) => {
    header_height = dimension.height
    TopArea[0] = dimension
    return drawText(context, '关闭', 20, header_height / 2, 'middle')
  }).then((dimension) => {
    ExitBtnArea[0] = {...dimension}
    return drawImage(context, 'images/homepage/bg_search@2x.png', dimension.endX + 100, header_height / 2, 'middle')
  }).then((dimension) => {
    SearchButtonArea[0] = {...dimension}
    return drawImage(context, 'images/homepage/icon_search@2x.png', dimension.startX + 20, header_height / 2, 'middle')
  }).then((dimension) => {
    if (!serachTerm) {

      return drawImage(context, 'images/homepage/text_placeholder@2x.png', dimension.endX + 15, header_height / 2, 'middle')
    } else {
      return drawText(context, serachTerm, dimension.endX + 15, header_height / 2, 'middle', 26, "#888" )
    }
  })
}

function logo(context) {
  return drawImage(context, 'images/homepage/LOGO@2x.png', screenWidth / 2, header_height / 2, 'center middle')
}

function leftNav(context, active_style, isAgent, set_price) {
  let padding = font_size
  let btn_active_offsetY = 0
  let bg_width
  let bg_height
  let active_btn_startY
  let active_btn

  SLDArea.splice(0, SLDArea.length)
  let next = drawImage(context, 'images/homepage/bg_style@2x.png', 0, header_height + 10, null, screenHeight - header_height - 10).then((dimension) => {
    bg_width = dimension.width
    bg_height = dimension.height
    return drawImage(context, 'images/homepage/text_eu@2x.png', bg_width / 2, dimension.startY + padding, 'center')
  }).then((dimension) => {
    if (active_style === 2) {
      active_btn_startY = dimension.startY - btn_active_offsetY
      active_btn = 'eu'
    }
    SLDArea[2] = {
      ...dimension,
      startX: 0,
      endX: bg_width,
      startY: dimension.startY - padding / 2,
      endY: dimension.endY + padding / 2
    }
    return drawImage(context, 'images/homepage/text_new@2x.png', bg_width / 2, dimension.endY + padding * 2, 'center')
  }).then((dimension) => {
    if (active_style === 0) {
      active_btn_startY = dimension.startY - btn_active_offsetY
      active_btn = 'new'
    }
    SLDArea[0] = {
      ...dimension,
      startX: 0,
      endX: bg_width,
      startY: dimension.startY - padding / 2,
      endY: dimension.endY + padding / 2
    }
    return drawImage(context, 'images/homepage/text_prom@2x.png', bg_width / 2, dimension.endY + padding * 2, 'center')
  }).then((dimension) => {
    if (active_style === 1) {
      active_btn_startY = dimension.startY - btn_active_offsetY
      active_btn = 'prom'
    }
    SLDArea[1] = {
      ...dimension,
      startX: 0,
      endX: bg_width,
      startY: dimension.startY - padding / 2,
      endY: dimension.endY + padding / 2
    }
    if (active_btn) {
      return drawImage(context, 'images/homepage/text_' + active_btn + '_active@2x.png', bg_width, active_btn_startY, 'right')
    } else{
      return dimension
    }
  })

  if (isAgent) {
    if (set_price) {
      return next.then((dimension) => {
        return drawImage(context, 'images/agent/btn_exit@2x.png', 0, screenHeight, 'bottom').then((dimension) => {

          SLDArea[4] = { ...dimension }
          return dimension
        })
      }).then((dimension) => {
        return drawImage(context, 'images/agent/text_help@2x.png', bg_width / 2, dimension.startY - font_size, 'center bottom').then((dimension) => {
          SLDArea[5] = { ...dimension }
          return dimension
        })
      })
    } else {
      return next.then((dimension) => {
        return drawImage(context, 'images/homepage/text_price@2x.png', bg_width / 2, screenHeight - font_size * 2, 'center bottom').then((dimension) => {

          SLDArea[4] = { ...dimension }
          return dimension
        })
      })
    }
  } else {
    return next
  }

}

function rightNav(context, active_category) {
  let padding = 5
  let bg_width
  let bg_height
  let bg_startX
  let bg_startY
  let active_btn_startY

  let new_canvas = wx.createCanvas()
  new_canvas.width = screenWidth
  new_canvas.height = screenHeight
  let new_context = new_canvas.getContext('2d')

  return drawImage(new_context, 'images/homepage/bg_category@2x.png', screenWidth, header_height + 10, null, screenHeight - header_height - 10, 'right').then((dimension) => {
    bg_width = dimension.width
    bg_height = dimension.height
    bg_startX = dimension.startX
    bg_startY = dimension.startY - FLDbtnAreaOffset.y
    let bg_btn_height = 90
    //绘制一级
    FLDbtnArea.splice(0, FLDbtnArea.length)//每次调用重新填充数据的时候清空之前数据

    let promises = []
    for (let i = 0; i < FLDsource.length; i++) {

      let is_active = active_category === i ? '_active' : ''
      promises[i] = drawImage(new_context, 'images/homepage/bg_btn_category' + is_active + '@2x.png', bg_startX + bg_width / 2, bg_startY + padding * i + bg_btn_height * i, 'center').then((dimension) => {
        let item = {...dimension, status: !!is_active}
        FLDbtnArea[i] = item
        return drawText(new_context, FLDsource[i].name, bg_startX + bg_width / 2, dimension.startY + dimension.height / 2, 'center middle', 28, is_active ? '#000' : '#fff')
      })
    }
    return Promise.all(promises).then(() => {
      context.drawImage(new_canvas, bg_startX, dimension.startY, bg_width, bg_height, bg_startX, dimension.startY, bg_width, bg_height)
      return dimension
    })
  })

}

let leftScroll = rightNav

export { basePage, leftScroll }
