import styled from "@emotion/styled";
import { inject, observer } from "mobx-react";
import React, { useRef, useState } from "react";
import { SlideText } from "../../../shared/types";
import { SocketActions, StoreProps } from "../../platform/SlideshowStore";
import withPlatform, { PlatformProps } from "../../platform/withPlatform";
import { isSlideObjectSelected } from "../../utils";
import ContentEditableDiv from "../shared/ContentEditableDiv";
import { canvasStyleDictionary } from "./canvasStyle";
import Resizer from "./Resizer";
import {
  currentKeys,
  CurrentScreen,
  deleteConnections,
  getCanvasPosition,
} from "./windowListeners";

type Props = {
  slideText: SlideText;
} & PlatformProps &
  StoreProps;

const a = canvasStyleDictionary;

function SlideObjectText(props: Props) {
  const [x, setX] = useState<number>(props.slideText.x);
  const [y, setY] = useState<number>(props.slideText.y);
  const [isEditing, setIsEditing] = useState<boolean>(false);
  const [isDragging, setIsDragging] = useState<boolean>(false);
  const textRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const isSelected = isSlideObjectSelected(props.slideText.id, props.store);

  const handleDragEnd = (e: any) => {
    const data = {
      ...props.slideText,
      x: e.target.x(),
      y: e.target.y(),
    };

    props.store.emit(SocketActions.UPDATE_SLIDE_OBJECT, {
      id: props.slideText.id,
      slideId: props.store.currentSlide.get()!,
      data: data,
    });
  };

  props.store.selectedSlideElement.get() === props.slideText.id;

  return (
    <Resizer
      width={props.slideText.width || null}
      height={props.slideText.height || null}
      top={props.slideText.y}
      left={props.slideText.x}
      visible={props.store.selectedSlideElement.get() === props.slideText.id}
      elementId={props.slideText.id}
      store={props.store}
    >
      {isEditing ? (
        <ContentEditableDiv
          style={{
            position: "relative",
            fontSize: props.slideText.fontSize || 16,
            padding: 5,
          }}
          value={props.slideText.text}
          autoFocus
          onChange={(value) => {
            props.store.emit(SocketActions.UPDATE_SLIDE_OBJECT, {
              id: props.slideText.id,
              slideId: props.store.currentSlide.get()!,
              data: {
                ...props.slideText,
                text: value,
              },
            });
          }}
          onKeyDown={(e) => {
            if (e.key === "Enter" || e.key === "Escape") {
              setIsEditing(false);
            }
          }}
          onBlur={(e) => {
            if (!props.slideText.text) {
              deleteConnections(
                props.slideText.id,
                props.store.currentSlide.get()!,
                props.store
              );

              props.store.emit(SocketActions.DELETE_SLIDE_OBJECT, {
                id: props.slideText.id,
                slideId: props.store.currentSlide.get()!,
              });
            }
            setIsEditing(false);
          }}
        />
      ) : (
        <div
          ref={textRef}
          style={{
            position: "relative",
            fontSize: props.slideText.fontSize || 16,
            cursor: "default",
            padding: 5,
          }}
          onDoubleClick={(e) => {
            setIsEditing(true);
          }}
          onClick={(e) => {
            props.store.setSelectedSlideElement(props.slideText.id);
            e.stopPropagation();
          }}
          onMouseDown={(e) => {
            if (e.button !== 1 && !(e.button === 0 && currentKeys["Space"])) {
              const canvasPosition = getCanvasPosition(e, props.store);
              CurrentScreen.canvasX = canvasPosition.x;
              CurrentScreen.canvasY = canvasPosition.y;
              props.store.currentDragElement.set(props.slideText.id);
              e.stopPropagation();
            }
          }}
          onMouseMove={(e) => {}}
          onMouseUp={(e) => {}}
        >
          {props.slideText.text}
        </div>
      )}
    </Resizer>
  );
}

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

const Input = styled.input`
  appearance: none;
  background: none;
  :focus {
    outline: none;
  }
  border: none;
`;