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

export default function TileText({ tile, box, bounds, videoBounds, cursors, viewing, onMouseDown, onDoubleClick, onMouseEnter }) {
  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 gradientColor = hexToRgb(tile.settings.marquee_gradient_color)
    style.width = "100vw"
    style.height = style.fontSize + "px"
    content = (
      <Marquee
        direction={tile.settings.marquee_direction || "left"}
        speed={tile.settings.marquee_speed || 1}
        gradient={!!tile.settings.marquee_gradient}
        gradientColor={gradientColor ? [gradientColor.r, gradientColor.g, gradientColor.b] : [0,0,0]}
      >
        <div style={{
          width: (tile.settings.marquee_content_width || 200) + "px",
          height: (tile.settings.marquee_content_height || (parseInt(tile.settings.font_size) + 20)) + "px",
        }}>
          {content}
        </div>
      </Marquee>
    )
  }
  return (
    <div
      className={className}
      onMouseDown={onMouseDown}
      onDoubleClick={onDoubleClick}
      onMouseEnter={onMouseEnter}
      style={style}
    >
      {content}
    </div>
  )
}