export const generateTransform = (tile, box, bounds, videoBounds) => {
  let { x, y, align, rotation, scale, units, is_tiled } = tile.settings
  let xUnits, yUnits
  if (is_tiled) {
    return 'translateZ(0)'
  }

  const is_full_width = (tile.type === 'text' && tile.settings.is_marquee)

  if (is_full_width) {
    x = 0
  }

  if (box) {
    x += box.dx
    y += box.dy
  }
  units = units || 'px'
  const [yalign, xalign] = align.split('_')
  let transform = ['translateZ(0)']
  if (!tile.settings.scale_to_video) {
    if (yalign === 'center') {
      transform.push('translateY(-50%)')
    }
    if (xalign === 'center') {
      transform.push('translateX(-50%)')
    }
    xUnits = units === 'video' ? Math.round(videoUnits(x, bounds, videoBounds)) + "px" : x + units
    yUnits = units === 'video' ? Math.round(videoUnits(y, bounds, videoBounds)) + "px" : y + units

    transform.push('translateX(' + xUnits + ')')
    transform.push('translateY(' + yUnits + ')')
    if (scale !== 1) {
      transform.push('scale(' + scale + ')')
    }
  } else {
    yUnits = y + "px"
    xUnits = x + "px"

    if (yalign === 'center') {
      transform.push('translateY(-50%)')
    }
    if (xalign === 'center') {
      transform.push('translateX(-50%)')
    }
    if (xalign === 'right') {
      transform.push('translateX(50%)')
    }
    if (yalign === 'bottom') {
      transform.push('translateY(50%)')
    }

    transform.push('scale(' + scale + ')')
    transform.push('scale(' + videoUnits(1, bounds, videoBounds) + ')')

    transform.push('translateY(' + yUnits + ')')
    transform.push('translateX(' + xUnits + ')')
  }

  if (rotation !== 0) {
    transform.push('rotateZ(' + rotation + 'deg)')
  }
  return transform.join(' ')
}

export const generateVideoStyle = (tile, bounds) => {
  const style = {
    pointerEvents: "none",
  }
  switch (tile.settings.video_style) {
    case 'normal':
      style.width = "auto"
      style.height = "auto"
      break
    case 'cover':
      if (tile.settings.width && (tile.settings.width / tile.settings.height) > (bounds.width / bounds.height)) {
        style.width = Math.round((tile.settings.width / tile.settings.height) * bounds.height)
        style.height = bounds.height
      } else {
        style.width = bounds.width
        style.height = Math.round((tile.settings.height / tile.settings.width) * bounds.width)
      }
      break
    case 'contain':
      if (tile.settings.width && (tile.settings.width / tile.settings.height) > (bounds.width / bounds.height)) {
        style.width = bounds.width
        style.height = Math.round((tile.settings.height / tile.settings.width) * bounds.width)
      } else {
        style.width = Math.round((tile.settings.width / tile.settings.height) * bounds.height)
        style.height = bounds.height
      }
      break
  }
  return style
}

export const unitsDimension = (tile, dimension, bounds, videoBounds) => {
  const value = tile.settings[dimension]
  if (!value) return "auto"
  if (tile.settings.units) {
    if (tile.settings.units === 'video') {
      return Math.round(videoUnits(value, bounds, videoBounds)) + "px"
    }
    return value + tile.settings.units
  }
  return value + "px"
}

export const videoUnits = (value, bounds, videoBounds) => {
  if ((videoBounds.width / videoBounds.height) > (bounds.width / bounds.height)) {
    return value * bounds.height / videoBounds.height
  }
  return value * bounds.width / videoBounds.width
}

export const hexToRgb = (hex) => {
  if (!hex) {
    return null
  }
  let result;
  if (hex.length === 7) {
    result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
  } else if (hex.length === 4) {
    result = /^#?([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})$/i.exec(hex)
  } else {
    return { r: 255, g: 0, b: 255 }
  }
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null
}

export const pickCursor = (tile, cursors, viewing) => {
  const { cursor, custom_cursor_id } = tile.settings
  const isCustom = cursor === 'custom' && custom_cursor_id in cursors
  const customCursor = isCustom ? cursors[custom_cursor_id] : null
  const x = isCustom ? Math.round(customCursor.settings.width / 2) : null
  const y = isCustom ? Math.round(customCursor.settings.height / 2) : null
  let className, cursorStyle
  if (tile.target_page_id || (viewing && tile.href)) {
    if ((viewing || cursor !== 'unclickable') && !isCustom) {
      className = (tile.settings.cursor || 'hand_up')
    }
  }
  if (isCustom) {
    className = ""
    cursorStyle = `url(${customCursor.url}) ${x} ${y}, `
    cursorStyle += (tile.target_page_id || tile.href) ? 'pointer' : 'default'
  }

  return [className, cursorStyle]
}