import styled from "@emotion/styled";
import { inject, observer } from "mobx-react";
import React from "react";
import { LIGHT_SECONDARY_ONE } from "../../../shared/colors";
import { StoreProps } from "../../platform/SlideshowStore";
import withPlatform, { PlatformProps } from "../../platform/withPlatform";
import { midPoint } from "./windowListeners";

type Props = {} & PlatformProps & StoreProps;

function PendingConnection(props: Props) {
  const start = props.store.currentConnectingCoordinates.get("start");
  const end = props.store.currentConnectingCoordinates.get("end");

  if (!start || !end) {
    return null;
  }

  const startMid = midPoint(
    start,
    props.store.currentConnectingOrientation.get()!
  );

  return (
    <g
      strokeWidth={2}
      stroke={LIGHT_SECONDARY_ONE}
      fill="none"
      markerEnd="url(#arrowhead)"
    >
      <path
        d={`M${start.x},${start.y} C${startMid.x},${startMid.y} ${end.x},${end.y} ${end.x},${end.y}`}
        onClick={(e) => console.log("CLICKED!")}
      />
    </g>
  );
}

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

const Container = styled.div``;