import styled from "@emotion/styled";
import { inject, observer } from "mobx-react";
import React from "react";
import {
  LIGHT_PRIMARY_THREE,
  LIGHT_TERTIARY_ONE_TRANSPARENT,
  LIGHT_TERTIARY_THREE,
  LIGHT_TERTIARY_THREE_TRANSPARENT,
} from "../../../shared/colors";
import { ID } from "../../../shared/types";
import { StoreProps } from "../../platform/SlideshowStore";
import withPlatform, { PlatformProps } from "../../platform/withPlatform";
import { CurrentScreen } from "./windowListeners";

type Props = {
  elementId: ID;
  top: number;
  left: number;
  width: number | null;
  height: number | null;
  visible: boolean;
  children: any;
} & PlatformProps &
  StoreProps;

function Resizer(props: Props) {
  const setDragging = (e: React.MouseEvent, orientation: string) => {
    CurrentScreen.screenX = e.screenX;
    CurrentScreen.screenY = e.screenY;
    props.store.currentResizeElement.set(props.elementId);
    props.store.currentResizeOrientation.set(orientation);
  };

  const setConnecting = (e: React.MouseEvent, orientation: string) => {
    console.log("CONNECTING");
    props.store.currentConnectingElement.set(props.elementId);
    props.store.currentConnectingOrientation.set(orientation);
    e.stopPropagation();
  };

  return (
    <Container
      style={{
        top: props.top,
        left: props.left,
        ...(props.width && { width: props.width }),
        ...(props.height && { height: props.height }),
      }}
    >
      <Resizers>
        <TopLeftResizer
          visible={props.visible}
          onMouseDown={(e) => setDragging(e, "top-left")}
        />
        <TopResizer
          visible={props.visible}
          onMouseDown={(e) => setDragging(e, "top")}
        />
        <TopRightResizer
          visible={props.visible}
          onMouseDown={(e) => setDragging(e, "top-right")}
        />
        <LeftResizer
          visible={props.visible}
          onMouseDown={(e) => setDragging(e, "left")}
        />
        <BottomLeftResizer
          visible={props.visible}
          onMouseDown={(e) => setDragging(e, "bottom-left")}
        />
        <BottomResizer
          visible={props.visible}
          onMouseDown={(e) => setDragging(e, "bottom")}
        />
        <BottomRightResizer
          visible={props.visible}
          onMouseDown={(e) => setDragging(e, "bottom-right")}
        />
        <RightResizer
          visible={props.visible}
          onMouseDown={(e) => setDragging(e, "right")}
        />
        <TopConnector
          visible={props.visible}
          onMouseDown={(e) => setConnecting(e, "top")}
        />
        <LeftConnector
          visible={props.visible}
          onMouseDown={(e) => setConnecting(e, "left")}
        />
        <BottomConnector
          visible={props.visible}
          onMouseDown={(e) => setConnecting(e, "bottom")}
        />
        <RightConnector
          visible={props.visible}
          onMouseDown={(e) => setConnecting(e, "right")}
        />
      </Resizers>
      {props.children}
    </Container>
  );
}

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

const Connector = styled.div<{ visible: boolean }>`
  ${(props) => !props.visible && "display: none;"}
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 6px;
  border: 2px solid ${LIGHT_TERTIARY_ONE_TRANSPARENT};
  background-color: ${LIGHT_TERTIARY_THREE_TRANSPARENT};
`;

const TopConnector = styled(Connector)`
  top: -20px;
  left: calc(50% - 5px);
`;

const LeftConnector = styled(Connector)`
  left: -20px;
  top: calc(50% - 5px);
`;

const RightConnector = styled(Connector)`
  right: -20px;
  top: calc(50% - 5px);
`;

const BottomConnector = styled(Connector)`
  bottom: -20px;
  left: calc(50% - 5px);
`;

const ResizerVerticalEdge = styled.div<{ visible: boolean }>`
  ${(props) => !props.visible && "display: none;"}
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: ${LIGHT_TERTIARY_THREE};
  z-index: 2;
`;

const ResizerHorizontalEdge = styled.div<{ visible: boolean }>`
  ${(props) => !props.visible && "display: none;"}
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: ${LIGHT_TERTIARY_THREE};
  z-index: 2;
`;

const ResizerCorner = styled.div<{ visible: boolean }>`
  ${(props) => !props.visible && "display: none;"}
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 6px;
  background: ${LIGHT_PRIMARY_THREE};
  border: 2px solid ${LIGHT_TERTIARY_THREE};
  z-index: 3;
`;

const TopResizer = styled(ResizerHorizontalEdge)`
  top: 0px;
  cursor: ns-resize;
`;

const BottomResizer = styled(ResizerHorizontalEdge)`
  bottom: 0px;
  cursor: ns-resize;
`;

const LeftResizer = styled(ResizerVerticalEdge)`
  left: 0px;
  cursor: ew-resize;
`;
const RightResizer = styled(ResizerVerticalEdge)`
  right: 0px;
  cursor: ew-resize;
`;

const TopLeftResizer = styled(ResizerCorner)`
  top: -5px;
  left: -5px;
  cursor: nwse-resize;
`;
const TopRightResizer = styled(ResizerCorner)`
  top: -5px;
  right: -5px;
  cursor: nesw-resize;
`;
const BottomLeftResizer = styled(ResizerCorner)`
  bottom: -5px;
  left: -5px;
  cursor: nesw-resize;
`;
const BottomRightResizer = styled(ResizerCorner)`
  bottom: -5px;
  right: -5px;
  cursor: nwse-resize;
`;

const Resizers = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
`;

const Container = styled.div`
  position: absolute;
`;