import drawText from '../util/drawText.js'
import drawImage, { drawVScrollImage, drawScaleImage, Aimage } from '../util/drawImage.js'
import Modal from './Modal'
import { ProductBuyModalBtnArea, getProductCanvas, getProductContext } from '../conf/data.js'

export default class ProductModal extends Modal {
  constructor(context, goodDetail) {
    super()
    if (screenWidth < 1334) {
      this.scale = 0.8;
    }
    this.bg_pop_win = 'images/product_popup/bg_win@2x.png'

    this.canvas = getProductCanvas()
    this.context = getProductContext()
    this.goodDetail = goodDetail
    this.btn_acitve = 'info'
    this.detail_image_offsetY = 0
    this.detail_image_point = {}
  }
  drawContent = () => {
    let ctx = this.context
    let next
    let startX = this.win_dimension.startX + 13 * this.scale;
    let startY = this.win_dimension.startY + 76 * this.scale;
    let btn_active_offsetX = 25 * this.scale
    let btn_active_offsetY = 7 * this.scale
    let active_btn_startX = startX - btn_active_offsetX
    let active_btn_startY
    let context_startX
    let context_width
    
    //详情
    next = drawScaleImage(ctx, 'images/product_popup/btn_info@2x.png', startX, startY, null, this.scale).then((dimension) => {
      if (this.btn_acitve === 'info') {
        active_btn_startY = dimension.startY - btn_active_offsetY
      }
      context_startX = dimension.endX
      context_width = this.win_dimension.width - 26 * this.scale - dimension.width
      ProductBuyModalBtnArea[0] = {...dimension}
      return drawScaleImage(ctx, 'images/product_popup/btn_combin@2x.png', startX, dimension.endY, null, this.scale)
    }).then((dimension) => {
      if (this.btn_acitve === 'combin') {
        active_btn_startY = dimension.startY - btn_active_offsetY
      }
      ProductBuyModalBtnArea[1] = { ...dimension }
      return drawScaleImage(ctx, 'images/product_popup/btn_buy@2x.png', startX, dimension.endY, null, this.scale)
    }).then((dimension) => {
      if (this.btn_acitve === 'buy') {
        active_btn_startY = dimension.startY - btn_active_offsetY
      }

      ProductBuyModalBtnArea[2] = { ...dimension }
      if (this.goodDetail.is_favorite) {
        return drawScaleImage(ctx, 'images/product_popup/bg_btn@2x.png', dimension.startX, this.win_dimension.endY - 13, 'bottom', this.scale).then((dimension) => {

          drawScaleImage(ctx, 'images/product_popup/btn_fav_active@2x.png', startX, this.win_dimension.endY - 13, 'bottom', this.scale)
          return dimension
        })
      } else {
        return drawScaleImage(ctx, 'images/product_popup/bg_btn@2x.png', dimension.startX, this.win_dimension.endY - 13, 'bottom', this.scale).then((dimension) => {
          drawScaleImage(ctx, 'images/product_popup/btn_fav@2x.png', dimension.startX + dimension.width / 2, this.win_dimension.endY - 13 - dimension.height / 2, 'center middle', this.scale)
          return dimension
        })
      }
    }).then((dimension) => {
      if (this.btn_acitve === 'buy') {
        active_btn_startY = dimension.startY - btn_active_offsetY
      }

      ProductBuyModalBtnArea[3] = { ...dimension }
      return dimension
    })

    let detail
    try {
      detail = JSON.parse(this.goodDetail.detail)
    } catch(e) {
      detail = this.goodDetail.detail
    }
    if (!Array.isArray(detail)) {
      detail = [detail]
    }
    let promises = []
    for (var i = 0; i < detail.length; i++) {
      var item = detail[i];
      promises.push(new Aimage(item).load())
    }

    let p_canvas
    let p_context
    let prev_img
    next = next.then(() => {
      return Promise.all(promises).then((res) => {
        let next
        for (let i = 0; i < res.length; i++ ) {
          let { image } = res[i]
          if (!p_canvas) {
            p_canvas = wx.createCanvas()
            p_canvas.width = image.width
            p_canvas.height = image.height * detail.length
            p_context = p_canvas.getContext('2d')

            this.p_canvas = p_canvas
            this.p_context = p_context
          }
          if (!next) {

            next = drawImage(p_context, image, 0, prev_img ? prev_img.endY : 0).then((dimension) => {

              prev_img = dimension
              return dimension
            })
          } else {
            next = next.then((dimension) => {
              return drawImage(p_context, image, 0, prev_img ? prev_img.endY : 0).then((dimension) => {
                prev_img = dimension
                return dimension
              })
            })
          }

        }
        return next
      })
    })

    //商品图
    next = next.then(() => {
      return drawVScrollImage(
        ctx,
        p_canvas,
        0,
        0,
        context_startX,
        startY,
        context_width,
        this.win_dimension.height - 76 * this.scale - 13 * this.scale
      )
    })

    next = next.then((dimension) => {
      this.detail_image_point = {...dimension}
      return drawScaleImage(ctx, 'images/product_popup/btn_' + this.btn_acitve + '_active@2x.png', active_btn_startX, active_btn_startY, null, this.scale)
    })
    return next

  }
  scroll = (x1, y1, x2, y2) => {
    let p = this.detail_image_point
    if (x1 > p.startX && x1 < p.endX && y1 > p.startY && y1 < p.endY &&
        x2 > p.startX && x2 < p.endX && y2 > p.startY && y2 < p.endY) {
      let scroll_height = y1 - y2
      let offsetY = this.detail_image_offsetY + scroll_height
      if (offsetY < 0) {
        offsetY = 0
      } else if (offsetY > p.fullHeight-p.height) {
        offsetY = p.fullHeight - p.height
      }
      this.detail_image_offsetY = offsetY
      return drawVScrollImage(
        this.context,
        this.p_canvas,
        0,
        offsetY,
        p.startX,
        p.startY,
        p.width,
        p.height
      ).then((dimension) => {
        this.detail_image_point = {...dimension}
        GameGlobal.canvas.getContext('2d').drawImage(this.canvas, 0, 0)
        return dimension
      })
    }
  }

  // 收藏按钮更新
  fav = () => {
    let ctx = this.context
    let p = ProductBuyModalBtnArea[3]

    let next
    next = drawScaleImage(ctx, 'images/product_popup/bg_btn@2x.png', p.startX, p.startY, '', this.scale).then((dimension) => {
      if (this.goodDetail.is_favorite) {
        return drawScaleImage(ctx, 'images/product_popup/btn_fav_active@2x.png', dimension.startX + dimension.width / 2, this.win_dimension.endY - 13 - dimension.height / 2, 'center middle', this.scale)
      } else {
        return drawScaleImage(ctx, 'images/product_popup/btn_fav@2x.png', dimension.startX + dimension.width / 2, this.win_dimension.endY - 13 - dimension.height / 2, 'center middle', this.scale)
      }
    })

    next.then(() => {
      GameGlobal.canvas.getContext('2d').drawImage(this.canvas, 0, 0)
    })
  }
}