import styled from "@emotion/styled";
import * as mobx from "mobx";
import { inject, observer } from "mobx-react";
import React, { useEffect } from "react";
import { Node } from "slate";
import { LIGHT_PRIMARY_THREE } from "../../shared/colors";
import { CurrentUser_me } from "../graphql/generated/types";
import { SocketActions, StoreProps } from "../platform/SlideshowStore";
import withPlatform, { PlatformProps } from "../platform/withPlatform";
import Editor from "./editor/Editor";
import ContentEditableDiv from "./shared/ContentEditableDiv";

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

const prefilledText = [{ type: "paragraph", children: [{ text: "" }] }];

function SlideBoardModal(props: Props) {
  const id = props.store.showBoardModal.get()!;
  const currentSlideId = props.store.currentSlide.get()!;
  const slide = props.store.slides.get(currentSlideId)! as any;
  const idea = slide.content[id];

  useEffect(() => {
    props.manager.bind(
      "esc",
      () => props.store.showBoardModal.set(null),
      "SlideBoardModal",
      "Hide the modal.",
      2
    );
    return () => {
      props.manager.unbind("esc", "SlideBoardModal");
    };
  });

  const updateTitle = (newTitle: string) => {
    props.store.emit(SocketActions.UPDATE_SLIDE_OBJECT, {
      id: idea.id,
      slideId: props.store.currentSlide.get()!,
      data: {
        ...idea,
        title: newTitle,
      },
    });
  };

  const updateDescription = (newDescription: Node[]) => {
    props.store.emit(SocketActions.UPDATE_SLIDE_OBJECT, {
      id: idea.id,
      slideId: props.store.currentSlide.get()!,
      data: {
        ...idea,
        description: newDescription,
      },
    });
  };

  return (
    <Background onClick={() => props.store.showBoardModal.set(null)}>
      <Container onClick={(e) => e.stopPropagation()}>
        <HeaderContainer>
          <ContentEditableDiv
            onChange={updateTitle}
            placeholder="Untitled"
            value={idea.title}
            autoFocus
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                const event = document!.createEvent("Event");
                event.initEvent("editor-focus", true, true);
                window.dispatchEvent(event);
                e.preventDefault();
                return false;
              } else if (e.key === "Escape") {
                props.store.showBoardModal.set(null);
              }
            }}
            style={{
              fontWeight: 700,
              fontSize: 40,
            }}
          />
        </HeaderContainer>
        <ContentContainer>
          <Editor
            store={props.store}
            content={mobx.toJS(idea.description)}
            setContent={(content) => updateDescription(content)}
            shortcuts={[
              {
                keys: "esc",
                callback: () => props.store.showBoardModal.set(null),
              },
            ]}
          />
        </ContentContainer>
      </Container>
    </Background>
  );
}

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

const ContentContainer = styled.div`
  width: calc(100% - 252px);
  margin-left: 126px;
  margin-right: 126px;
  padding-top: 12px;
  border-top: 1px solid rgba(55, 53, 47, 0.09);
  height: 100%;
`;

const Header = styled.div``;

const HeaderContainer = styled.div`
  margin-top: 80px;
  width: calc(100% - 252px);
  padding-left: 126px;
  padding-right: 126px;
  margin-bottom: 8px;
`;

const Background = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 10;
`;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 72px;
  left: 72px;
  right: 72px;
  margin-left: auto;
  margin-right: auto;
  max-width: 975px;
  min-width: 975px;
  height: calc(100% - 144px);
  border-radius: 4px;
  background-color: ${LIGHT_PRIMARY_THREE};
  box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
    rgba(15, 15, 15, 0.1) 0px 5px 10px, rgba(15, 15, 15, 0.2) 0px 15px 40px;
  z-index: 20;
`;