// A way to update the transform properties on the canvas without causing a shit ton of rerenders
import {
  LIGHT_TERTIARY_ONE_TRANSPARENT,
  LIGHT_TERTIARY_TWO,
} from "../../../shared/colors";
import { ID, SlideObject } from "../../../shared/types";
import { CurrentUser_me_team_slideshows_frames } from "../../graphql/generated/types";
import { SlideshowStore } from "../../platform/SlideshowStore";

type CanvasStyle = {
  scale: number;
  top: number;
  left: number;
};

type CanvasStyleInput = {
  scale?: number;
  top?: number;
  left?: number;
};

export const canvasStyleDictionary: {
  [slideId: string]: CanvasStyle;
} = {};

export function setUpNonRenderStyles(slideId: string) {
  canvasStyleDictionary[slideId] = {
    scale: 1,
    top: 0,
    left: 0,
  };
  computeStyle();
}

export function setStyle(id: ID, style: CanvasStyleInput) {
  canvasStyleDictionary[id] = {
    ...canvasStyleDictionary[id],
    ...style,
  };
  computeStyle();
}

export function snapToFrame(
  frame: CurrentUser_me_team_slideshows_frames,
  containerBox: DOMRect
) {
  canvasStyleDictionary[frame.slide.id] = {
    ...canvasStyleDictionary[frame.slide.id],
    top: Math.min(0, frame.top + containerBox.height / 2),
    left: Math.min(0, frame.left + containerBox.width / 2),
    scale: frame.scale,
  };
  computeStyle();
}

export function snapToItem(
  item: any,
  containerBox: DOMRect,
  store: SlideshowStore
) {
  if (item.type === "FRAME") {
    console.log("SNAP TO FRAME???");
    snapToFrame(item, containerBox);
  } else {
    snapToSlideObject(item, containerBox, store);
  }
  console.log("SNAPPING");
  console.log(item);
}

export function snapToSlideObject(
  item: SlideObject & { width: number; height: number },
  containerBox: DOMRect,
  store: SlideshowStore
) {
  const currentSlide = store.currentSlide.get()!;

  const itemCenterTop = item.y + item.height / 2;
  const itemCenterLeft = item.x + item.width / 2;

  const canvasTransformTop = (itemCenterTop - containerBox.height / 2) * -1;
  const canvasTransformLeft = (itemCenterLeft - containerBox.width / 2) * -1;

  canvasStyleDictionary[currentSlide] = {
    top: Math.min(0, canvasTransformTop),
    left: Math.min(0, canvasTransformLeft),
    scale: 1,
  };
  computeStyle();
  console.log("SLIDE OBJECT");
  console.log(item);
}

function computeStyle() {
  const computedStyle = Object.keys(canvasStyleDictionary).reduce(
    (accumulator, currentSlideId) => {
      const canvasStyle = canvasStyleDictionary[currentSlideId];
      const thisStyle = `.canvas-${currentSlideId}{
        transform: translate(${canvasStyle.left}px, ${canvasStyle.top}px) scale(${canvasStyle.scale});
        top: 0px;
        left: 0px;
        transform-origin: 0px 0px;
      }`;

      return accumulator + thisStyle;
    },
    ""
  );

  canvasEl.innerHTML = computedStyle;
}

export const selectRectangleStyle = {
  top: 0,
  left: 0,
  width: 0,
  height: 0,
  show: false,
};

export function setSelectRectangleElStyle(style: {
  top?: number;
  left?: number;
  width?: number;
  height?: number;
  show?: boolean;
}) {
  selectRectangleStyle.top =
    style.top !== undefined ? style.top : selectRectangleStyle.top;
  selectRectangleStyle.left =
    style.left !== undefined ? style.left : selectRectangleStyle.left;
  selectRectangleStyle.width =
    style.width !== undefined ? style.width : selectRectangleStyle.width;
  selectRectangleStyle.height =
    style.height !== undefined ? style.height : selectRectangleStyle.height;
  selectRectangleStyle.show =
    style.show !== undefined ? style.show : selectRectangleStyle.show;

  selectRectangleEl.innerHTML = `.select-rectangle {
    position: absolute;
    border-radius: 2px solid ${LIGHT_TERTIARY_TWO};
    background-color: ${LIGHT_TERTIARY_ONE_TRANSPARENT};
    top: ${selectRectangleStyle.top}px;
    left: ${selectRectangleStyle.left}px;
    width: ${selectRectangleStyle.width}px;
    height: ${selectRectangleStyle.height}px;
    ${!selectRectangleStyle.show && "display: none;"}
    z-index: 100;
  }`;
}

const canvasEl = document.createElement("style");
canvasEl.type = "text/css";

const selectRectangleEl = document.createElement("style");
selectRectangleEl.type = "text/css";

const head = document.querySelector("head")!;
head.appendChild(canvasEl);
head.appendChild(selectRectangleEl);