import React, { Component } from 'react'
import { Link } from 'react-router-dom'

const TileHandle = ({ tile, bounds, box, viewing, onMouseDown, onDoubleClick }) => {
  // console.log(tile)
  const { width, height } = tile.settings
  const style = {
    transform: generateTransform(tile, box),
    opacity: tile.settings.opacity,
  }
  // console.log(generateTransform(tile))
  let content;
  let className = ['tile', tile.type].join(' ')
  if (tile.target_page_id || (viewing && tile.href)) {
    className += ' ' + (tile.settings.cursor || 'hand_up')
  }
  // console.log(tile.settings)
  switch (tile.type) {
    case 'image':
      if (!tile.settings.url) {
        return null
      }
      if (tile.settings.is_tiled) {
        style.backgroundImage = 'url(' + tile.settings.url + ')'
        style.backgroundPosition = tile.settings.align.replace('_', ' ')
        switch (tile.settings.tile_style) {
          default:
          case 'tile':
            break
          case 'cover':
            style.backgroundSize = 'cover'
            break
          case 'contain':
            style.backgroundSize = 'contain'
            break
          case 'contain no-repeat':
            style.backgroundSize = 'contain'
            style.backgroundRepeat = 'no-repeat'
            break
        }
        className += ' is_tiled'
      } else {
        className += ' ' + tile.settings.align
        content = <img src={tile.settings.url} />
      }
      break
    case 'text':
      if (!tile.settings.content) {
        return null
      }
      content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
      className += ' ' + tile.settings.align
      style.width = tile.settings.width ? tile.settings.width + 'px' : 'auto'
      style.height = tile.settings.height ? tile.settings.height + 'px' : 'auto'
      style.fontFamily = tile.settings.font_family
      style.fontSize = tile.settings.font_size + 'px'
      style.lineHeight = 1.5
      style.fontWeight = (tile.settings.font_style || "").indexOf('bold') !== -1 ? 'bold' : 'normal'
      style.fontStyle = (tile.settings.font_style || "").indexOf('italic') !== -1 ? 'italic' : 'normal'
      style.backgroundColor = tile.settings.background_color || 'transparent'
      style.color = tile.settings.font_color || '#dddddd!important'
      break
    case 'link':
      content = ""
      className += ' ' + tile.settings.align
      style.width = tile.settings.width ? tile.settings.width + 'px' : 'auto'
      style.height = tile.settings.height ? tile.settings.height + 'px' : 'auto'
      break
    case 'script':
      content = ""
      if (viewing) {
        eval(tile.settings.content)
      } else {
        content = "SCRIPT"
      }
  }
  if (viewing && tile.href) {
    if (tile.href.indexOf('http') === 0) {
      return (
        <a href={tile.href} rel='noopener'>
          <div
            className={className}
            style={style}
          >
            {content}
          </div>
        </a>
      )
    } else {
      return (
        <Link to={tile.href}>
          <div
            className={className}
            onMouseDown={onMouseDown}
            style={style}
          >
            {content}
          </div>
        </Link>
      )
    }
  } else {
    return (
      <div
        className={className}
        onMouseDown={onMouseDown}
        onDoubleClick={onDoubleClick}
        style={style}
      >
        {content}
      </div>
    )
  }
}

const generateTransform = (tile, box) => {
  let { x, y, align, rotation, scale, is_tiled } = tile.settings
  if (is_tiled) {
    return 'translateZ(0)'
  }
  if (box) {
    x += box.dx
    y += box.dy
  }
  const [yalign, xalign] = align.split('_')
  let transform = ['translateZ(0)']
  if (yalign === 'center') {
    transform.push('translateY(-50%)')
  }
  if (xalign === 'center') {
    transform.push('translateX(-50%)')
  }
  // if (x % 2 == 1) x += 0.5
  // if (y % 2 == 1) y += 0.5
  transform.push('translateX(' + x + 'px)')
  transform.push('translateY(' + y + 'px)')
  if (scale !== 1) {
    transform.push('scale(' + scale + ')')
  }
  if (rotation !== 0) {
    transform.push('rotateZ(' + rotation + 'deg)')
  }
  return transform.join(' ')
}

export default TileHandle