import styled from "@emotion/styled";
import { inject, observer } from "mobx-react";
import React from "react";
import {
  LIGHT_PRIMARY_ONE,
  LIGHT_PRIMARY_THREE,
  LIGHT_SHADOW,
} from "../../../shared/colors";
import {
  SlideComment,
  SlideObjectType,
  SlideRectangle,
  SlideText,
} from "../../../shared/types";
import { CurrentUser_me } from "../../graphql/generated/types";
import { StoreProps } from "../../platform/SlideshowStore";
import withPlatform, { PlatformProps } from "../../platform/withPlatform";
import SlideCommentInfo from "./SlideCommentInfo";
import SlideRectangleInfo from "./SlideRectangleInfo";
import SlideTextInfo from "./SlideTextInfo";

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

function SlideInfo(props: Props) {
  const slideId = props.store.currentSlide.get()!;
  const selectedSlideElement = props.store.selectedSlideElement.get();
  let content = null;
  if (!selectedSlideElement) {
    return null;
  } else {
    const slideObject = props.store.slides.get(slideId)!.content[
      selectedSlideElement
    ];

    switch (slideObject.type) {
      case SlideObjectType.TEXT:
        content = (
          <SlideTextInfo
            key={slideObject.id}
            user={props.user}
            store={props.store}
            slideText={slideObject as SlideText}
          />
        );
        break;
      case SlideObjectType.COMMENT:
        content = (
          <SlideCommentInfo
            key={slideObject.id}
            user={props.user}
            store={props.store}
            slideComment={slideObject as SlideComment}
          />
        );
        break;
      case SlideObjectType.RECTANGLE:
        content = (
          <SlideRectangleInfo
            key={slideObject.id}
            user={props.user}
            store={props.store}
            slideRectangle={slideObject as SlideRectangle}
          />
        );
        break;
      case SlideObjectType.AIRTABLE:
      default:
        content = <div>Unsupported info type</div>;
    }
  }

  return (
    <Container
      onClick={(e) => e.stopPropagation()}
      onMouseDown={(e) => e.stopPropagation()}
      onMouseUp={(e) => e.stopPropagation()}
    >
      {content}
    </Container>
  );
}

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

const ColorList = styled.div``;

const Container = styled.div`
  position: absolute;
  z-index: 5;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  max-width: 240px;
  height: calc(100% - 32px);
  margin-bottom: 16px;
  border-radius: 8px;
  background-color: ${LIGHT_PRIMARY_THREE};
  border-left: 1px solid ${LIGHT_PRIMARY_ONE};
  box-shadow: 0px 1px 5px 0px ${LIGHT_SHADOW};
`;