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

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

    this.canvas = getProductCanvas()
    this.context = getProductContext()
    this.goodDetail = goodDetail
    this.btn_acitve = btn_active
  }
  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/size_popup/btn_size@2x.png', startX, startY, null, this.scale).then((dimension) => {
      if (this.btn_acitve === 'size') {
        active_btn_startY = dimension.startY - btn_active_offsetY
      }
      ProductSizeModalBtnArea[0] = {...dimension}
      context_startX = dimension.endX
      context_width = this.win_dimension.width - 26 * this.scale - dimension.width
      return drawScaleImage(ctx, 'images/size_popup/btn_pic@2x.png', startX, dimension.endY, null, this.scale)
    }).then((dimension) => {
      if (this.btn_acitve === 'pic') {
        active_btn_startY = dimension.startY - btn_active_offsetY
      }
      ProductSizeModalBtnArea[1] = { ...dimension }
      return drawScaleImage(ctx, 'images/size_popup/btn_video@2x.png', startX, dimension.endY, null, this.scale)
    }).then((dimension) => {
      if (this.btn_acitve === 'video') {
        active_btn_startY = dimension.startY - btn_active_offsetY
      }
      ProductSizeModalBtnArea[2] = { ...dimension }
      return dimension
    })

    //商品图
    next = next.then(() => {
      let image_url
      if (this.btn_acitve === 'size') {
        image_url = this.goodDetail.upload_img
      } else if (this.btn_acitve === 'pic') {
        image_url = this.goodDetail.attr
      } else if (this.btn_acitve === 'video') {
        image_url = this.goodDetail.attr
      }
      return drawImage(
        ctx,
        this.goodDetail.upload_img,
        context_startX,
        startY,
        context_width,
        this.win_dimension.height - 89 * this.scale)
    })
    next = next.then((dimension) => {
      return drawScaleImage(ctx, 'images/size_popup/btn_' + this.btn_acitve + '_active@2x.png', active_btn_startX, active_btn_startY, null, this.scale)
    })
    return next
  }
}