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;
    }
    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>
  );
}