import React, { useState, useEffect } from 'react'
import { generateTransform, pickCursor } from 'app/views/tile/tile.utils'

export default function TileImage({ tile, box, bounds, cursors, videoBounds, viewing, onMouseDown, onDoubleClick, onMouseEnter, onMouseLeave }) {
  const [style, setStyle] = useState({
    transition: tile.settings.is_popup ? "opacity 0.2s" : "",
    opacity: tile.settings.is_popup ? 0.0 : tile.settings.opacity,
  })
  const [className, setClassName] = useState("tile")

  useEffect(() => {
    // console.log(tile)
    const style = {
      transform: generateTransform(tile, box, bounds, videoBounds),
      opacity: tile.settings.is_popup ? 0.0 : tile.settings.opacity,
      transition: tile.settings.is_popup ? "opacity 0.2s" : ""
    }
    // console.log(generateTransform(tile))
    let content
    let className = ['tile', tile.type].join(' ')

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

    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
    }
    setStyle(style)
    setClassName(className)
    if (tile.settings.is_popup) {
      setTimeout(() => {
        setStyle({
          ...style,
          opacity: tile.settings.opacity,
        })
      }, 10)
    }
  }, [])

  return (
    <div
      style={style}
      className={className}
      onMouseDown={onMouseDown}
      onDoubleClick={onDoubleClick}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      {!tile.settings.is_tiled && <img src={tile.settings.url} />}
    </div>
  )
}