import React from 'react'
import { generateTransform, unitsDimension, hexToRgb, pickCursor } from 'app/views/tile/tile.utils'
import Marquee from "react-fast-marquee"

const VERTICAL_MARQUEE_DIRECTION = {
  up: "left",
  down: "right",
}

export default function TileText({ tile, box, bounds, videoBounds, cursors, viewing, onMouseDown, onDoubleClick, onMouseEnter, onMouseLeave }) {
  if (!tile.settings.content) {
    return null
  }

  // console.log(tile)
  const style = {
    transform: generateTransform(tile, box, bounds, videoBounds),
    opacity: tile.settings.opacity,
  }
  // console.log(generateTransform(tile))
  let className = ['tile', tile.type].join(' ')

  let [cursorClass, cursorStyle] = pickCursor(tile, cursors, viewing)
  if (cursorClass) {
    className += " " + cursorClass
  }
  if (cursorStyle) {
    style.cursor = cursorStyle
  }

  
  let content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
  className += ' ' + tile.settings.align
  style.width = unitsDimension(tile, 'width', bounds, videoBounds)
  style.height = unitsDimension(tile, 'height', bounds, videoBounds)
  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'

  if (tile.settings.is_marquee) {
    const verticalDirection = VERTICAL_MARQUEE_DIRECTION[tile.settings.marquee_direction]
    const direction = verticalDirection || tile.settings.marquee_direction || "left"
    const gradientColor = hexToRgb(tile.settings.marquee_gradient_color)
    let contentStyle = {}
    if (verticalDirection) {
      // style.top = 0
      style.width = "100vh"
      style.height = tile.settings.marquee_content_width + "px"
      style.transform += " rotate(90deg)"
      contentStyle.transform = "rotate(-90deg)"
      contentStyle.width = tile.settings.marquee_content_width + "px"
      // contentStyle.height = "100vh"
    } else {
      style.width = "100vw"
      style.height = style.fontSize + "px"
      contentStyle.width = (tile.settings.marquee_content_width || 200) + "px"
      contentStyle.height = (tile.settings.marquee_content_height || (parseInt(tile.settings.font_size) + 20)) + "px"
    }
    content = (
      <Marquee
        direction={direction}
        speed={tile.settings.marquee_speed || 1}
        gradient={!!tile.settings.marquee_gradient}
        gradientColor={gradientColor ? [gradientColor.r, gradientColor.g, gradientColor.b] : [0,0,0]}
      >
        <div style={contentStyle}>
          {content}
        </div>
      </Marquee>
    )
  }
  return (
    <div
      className={className}
      onMouseDown={onMouseDown}
      onDoubleClick={onDoubleClick}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      style={style}
    >
      {content}
    </div>
  )
}