import styled from "@emotion/styled";
import { clamp } from "lodash";
import { inject, observer } from "mobx-react";
import React, { useRef, useState } from "react";
import {
  LIGHT_SECONDARY_FIVE,
  LIGHT_SECONDARY_FOUR,
  LIGHT_SECONDARY_ONE,
  LIGHT_SECONDARY_THREE,
  LIGHT_SECONDARY_TWO,
} from "../../../shared/colors";
import { SlideComment } from "../../../shared/types";
import { isNumeric } from "../../../shared/utils/utils";
import { CurrentUser_me } from "../../graphql/generated/types";
import { SocketActions, StoreProps } from "../../platform/SlideshowStore";
import withPlatform, { PlatformProps } from "../../platform/withPlatform";
import {
  INTERNAL_CANVAS_HEIGHT,
  INTERNAL_CANVAS_WIDTH,
} from "../canvas/canvasUtils";

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

enum SlideCommentInfoSelections {
  DESIGN = "DESIGN",
  INTERACTION = "INTERACTION",
}

function SlideCommentInfo(props: Props) {
  const [currentSelection, setCurrentSelection] = useState<
    SlideCommentInfoSelections
  >(SlideCommentInfoSelections.DESIGN);

  const [x, setX] = useState<string>(props.slideComment.x.toString());
  const [y, setY] = useState<string>(props.slideComment.y.toString());

  const xRef = useRef<HTMLInputElement>(null);
  const yRef = useRef<HTMLInputElement>(null);

  const slideId = props.store.currentSlide.get()!;

  let content: any = null;

  switch (currentSelection) {
    case SlideCommentInfoSelections.DESIGN:
      content = (
        <Content>
          <StyleSelectorContainer>
            <StyleColumn>
              <StyleSelector>
                <StyleSelectorTitle>X</StyleSelectorTitle>
                <Input
                  ref={xRef}
                  value={x}
                  onChange={(e) => {
                    setX(e.target.value);
                  }}
                  onKeyPress={(e) => {
                    if (e.key === "Enter") {
                      xRef.current?.blur();
                    }
                  }}
                  onBlur={() => {
                    if (!x || !isNumeric(x)) {
                      setX(props.slideComment.x.toString());
                    } else {
                      props.store.emit(SocketActions.UPDATE_SLIDE_OBJECT, {
                        id: props.slideComment.id,
                        slideId: slideId,
                        data: {
                          ...props.slideComment,
                          x: clamp(0, parseInt(x), INTERNAL_CANVAS_WIDTH),
                        },
                      });
                    }
                  }}
                />
              </StyleSelector>
            </StyleColumn>
            <StyleColumn>
              <StyleSelector>
                <StyleSelectorTitle>Y</StyleSelectorTitle>
                <Input
                  ref={yRef}
                  value={y}
                  onChange={(e) => {
                    setY(e.target.value);
                  }}
                  onKeyPress={(e) => {
                    if (e.key === "Enter") {
                      yRef.current?.blur();
                    }
                  }}
                  onBlur={() => {
                    if (!y || !isNumeric(y)) {
                      setY(props.slideComment.y.toString());
                    } else {
                      props.store.emit(SocketActions.UPDATE_SLIDE_OBJECT, {
                        id: props.slideComment.id,
                        slideId: slideId,
                        data: {
                          ...props.slideComment,
                          y: clamp(0, parseInt(y), INTERNAL_CANVAS_HEIGHT),
                        },
                      });
                    }
                  }}
                />
              </StyleSelector>
            </StyleColumn>
            <SmallStyleColumn></SmallStyleColumn>
          </StyleSelectorContainer>
        </Content>
      );
      break;
    case SlideCommentInfoSelections.INTERACTION:
      content = <div>TODO</div>;
      break;
  }

  return (
    <>
      <Selector>
        <Option
          active={currentSelection === SlideCommentInfoSelections.DESIGN}
          onClick={() => setCurrentSelection(SlideCommentInfoSelections.DESIGN)}
        >
          Design
        </Option>
        <Option
          active={currentSelection === SlideCommentInfoSelections.INTERACTION}
          onClick={() =>
            setCurrentSelection(SlideCommentInfoSelections.INTERACTION)
          }
        >
          Interaction
        </Option>
      </Selector>
      {content}
    </>
  );
}

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

const StyleSelectorTitle = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  font-size: 12px;
  color: ${LIGHT_SECONDARY_TWO};
  margin-right: 4px;
`;

const Input = styled.input<{ border?: any }>`
  -webkit-appearance: none;
  background-image: none;
  background-color: none;
  color: ${LIGHT_SECONDARY_ONE};
  :focus {
    outline: none;
  }
  ::placeholder {
    color: ${LIGHT_SECONDARY_TWO};
  }
  border: none;
  font-size: 12px;
  width: 100%;
  padding-bottom: 2px;
`;

const Selector = styled.div`
  display: flex;
  padding: 16px;
  border-bottom: 1px solid ${LIGHT_SECONDARY_FIVE};
`;

const Option = styled.div<{ active: boolean }>`
  font-weight: bold;
  font-size: 12px;
  margin-right: 12px;
  color: ${(props) =>
    props.active ? LIGHT_SECONDARY_ONE : LIGHT_SECONDARY_FOUR};
  &:last-child {
    margin-right: 0px;
  }
  :hover {
    color: ${(props) =>
      props.active ? LIGHT_SECONDARY_ONE : LIGHT_SECONDARY_THREE};
  }
  cursor: pointer;
  transition: 0.16s ease-in-out;
`;

const Content = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
`;

const StyleColumn = styled.div`
  display: flex;
  flex-direction: column;
  width 88px;
  padding-top: 12px;
  padding-left: 12px;
  padding-bottom: 12px;
`;

const SmallStyleColumn = styled.div`
  width: 28px;

  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 16px;
  padding-right: 16px;
`;

const StyleSelector = styled.div`
  display: flex;
  align-items: center;
  width: 72px;
  padding-left: 8px;
  padding-right: 8px;
  height: 28px;
  margin-bottom: 4px;
  &:last-child {
    margin-bottom: 0px;
  }
  :hover {
    border: 1px solid ${LIGHT_SECONDARY_FIVE};
    height: 26px;
    width: 71px;
    padding-left: 7px;
  }
`;

const StyleSelectorContainer = styled.div`
  display: flex;
  border-bottom: 1px solid ${LIGHT_SECONDARY_FIVE};
`;