import styled from "@emotion/styled";
import { inject, observer } from "mobx-react";
import React, { useEffect, useRef } from "react";
import Canvas from "../components/canvas/Canvas";
import { CurrentUser_me } from "../graphql/generated/types";
import { StoreProps } from "../platform/SlideshowStore";
import withPlatform, { PlatformProps } from "../platform/withPlatform";
// import Canvas from "../components/canvas/Canvas";

type Props = {
  user: CurrentUser_me;
} & PlatformProps &
  StoreProps;

function PresentationCanvas(props: Props) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    props.manager.bind(
      "left",
      () => props.store.previousSlide(),
      "PresentationCanvas",
      "Go to the previous slide",
      1
    );

    props.manager.bind(
      "right",
      () => props.store.nextSlide(),
      "PresentationCanvas",
      "Go to the next slide",
      1
    );

    props.manager.bind(
      "up",
      () => props.store.previousSlide(),
      "PresentationCanvas",
      "Go to the previous slide",
      1
    );

    props.manager.bind(
      "down",
      () => props.store.nextSlide(),
      "PresentationCanvas",
      "Go to the next slide",
      1
    );

    return () => {
      props.manager.unbind("left", "PresentationCanvas");
      props.manager.unbind("right", "PresentationCanvas");
      props.manager.unbind("up", "PresentationCanvas");
      props.manager.unbind("down", "PresentationCanvas");
    };
  });

  console.log("PRESENTING");
  console.log(containerRef.current?.getBoundingClientRect());

  return (
    <Container ref={containerRef}>
      <Canvas store={props.store} user={props.user} />
      {/* <Stage
        width={1200}
        height={900}
        onWheel={(e) => {
          console.log("WHEEL");
          e.evt.preventDefault();
          const scaleBy = 1.2;
          const stage = e.target.getStage()!;
          const oldScale = stage.scaleX();
          const mousePointTo = {
            x: stage.getPointerPosition()!.x / oldScale - stage.x() / oldScale,
            y: stage.getPointerPosition()!.y / oldScale - stage.y() / oldScale,
          };

          const newScale =
            e.evt.deltaY > 0 ? oldScale * scaleBy : oldScale / scaleBy;

          setStageScale(newScale);
          setStageX(
            -(mousePointTo.x - stage.getPointerPosition()!.x / newScale) *
              newScale
          );
          setStageY(
            -(mousePointTo.y - stage.getPointerPosition()!.y / newScale) *
              newScale
          );
        }}
        scaleX={stageScale}
        scaleY={stageScale}
        style={{ backgroundColor: LIGHT_PRIMARY_THREE }}
      >
        <Layer>
          {Object.keys(currentSlide.content).map((slideObjectKey) => {
            const currentSlideObject = currentSlide.content[slideObjectKey];
            switch (currentSlideObject.type) {
              case SlideObjectType.TEXT:
                return (
                  <Text
                    store={props.store}
                    key={slideObjectKey}
                    slideObject={currentSlideObject as SlideText}
                  />
                );
              case SlideObjectType.AIRTABLE:
                return (
                  <Airtable
                    store={props.store}
                    key={slideObjectKey}
                    slideObject={currentSlideObject}
                  />
                );
              case SlideObjectType.RECTANGLE:
              default:
                console.log("UNHANDLED");
                return null;
            }
          })}
        </Layer>
      </Stage> */}
    </Container>
  );
}

export default withPlatform(inject("store")(observer(PresentationCanvas)));

const Container = styled.div`
  display: flex;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
`;