import styled from "@emotion/styled";
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 { SlideText } 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 {
  clamp,
  INTERNAL_CANVAS_HEIGHT,
  INTERNAL_CANVAS_WIDTH,
} from "../canvas/canvasUtils";

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

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

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

  const [x, setX] = useState<string>(props.slideText.x.toString());
  const [y, setY] = useState<string>(props.slideText.y.toString());
  const [text, setText] = useState<string>(props.slideText.text.toString());
  const [fontSize, setFontSize] = useState<string>(
    props.slideText.fontSize ? props.slideText.fontSize.toString() : "16"
  );
  const xRef = useRef<HTMLInputElement>(null);
  const yRef = useRef<HTMLInputElement>(null);
  const textRef = useRef<HTMLInputElement>(null);
  const fontSizeRef = useRef<HTMLInputElement>(null);

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

  let content: any = null;

  switch (currentSelection) {
    case SlideElementInfoSelections.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.slideText.x.toString());
                    } else {
                      props.store.emit(SocketActions.UPDATE_SLIDE_OBJECT, {
                        id: props.slideText.id,
                        slideId: slideId,
                        data: {
                          ...props.slideText,
                          x: clamp(0, parseInt(x), INTERNAL_CANVAS_WIDTH),
                        },
                      });
                    }
                  }}
                />
              </StyleSelector>
              <StyleSelector>
                <StyleSelectorTitle>W</StyleSelectorTitle>
                <Input
                  value={props.slideText.x}
                  onChange={(e) =>
                    props.store.emit(SocketActions.UPDATE_SLIDE_OBJECT, {
                      id: props.slideText.id,
                      slideId: slideId,
                      data: {
                        ...props.slideText,
                        x: parseInt(e.target.value),
                      },
                    })
                  }
                />
              </StyleSelector>
              <StyleSelector>
                <StyleSelectorTitle>V</StyleSelectorTitle>
                <Input
                  ref={textRef}
                  value={text}
                  onChange={(e) => {
                    setText(e.target.value);
                  }}
                  onKeyPress={(e) => {
                    if (e.key === "Enter") {
                      textRef.current?.blur();
                    }
                  }}
                  onBlur={() => {
                    if (!text) {
                      setText(props.slideText.text.toString());
                    } else {
                      props.store.emit(SocketActions.UPDATE_SLIDE_OBJECT, {
                        id: props.slideText.id,
                        slideId: slideId,
                        data: {
                          ...props.slideText,
                          text,
                        },
                      });
                    }
                  }}
                />
              </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.slideText.y.toString());
                    } else {
                      props.store.emit(SocketActions.UPDATE_SLIDE_OBJECT, {
                        id: props.slideText.id,
                        slideId: slideId,
                        data: {
                          ...props.slideText,
                          y: clamp(0, parseInt(y), INTERNAL_CANVAS_HEIGHT),
                        },
                      });
                    }
                  }}
                />
              </StyleSelector>
              <StyleSelector>
                <StyleSelectorTitle>H</StyleSelectorTitle>
                <Input
                  value={props.slideText.y}
                  onChange={(e) =>
                    props.store.emit(SocketActions.UPDATE_SLIDE_OBJECT, {
                      id: props.slideText.id,
                      slideId: slideId,
                      data: {
                        ...props.slideText,
                        y: parseInt(e.target.value),
                      },
                    })
                  }
                />
              </StyleSelector>
              <StyleSelector>
                <StyleSelectorTitle>F</StyleSelectorTitle>
                <Input
                  ref={fontSizeRef}
                  value={fontSize}
                  onChange={(e) => {
                    setFontSize(e.target.value);
                  }}
                  onKeyPress={(e) => {
                    if (e.key === "Enter") {
                      fontSizeRef.current?.blur();
                    }
                  }}
                  onBlur={() => {
                    if (!fontSize || !isNumeric(fontSize)) {
                      setFontSize(props.slideText.fontSize.toString());
                    } else {
                      props.store.emit(SocketActions.UPDATE_SLIDE_OBJECT, {
                        id: props.slideText.id,
                        slideId: slideId,
                        data: {
                          ...props.slideText,
                          fontSize: clamp(0, parseInt(fontSize), 128),
                        },
                      });
                    }
                  }}
                />
              </StyleSelector>
            </StyleColumn>
            <SmallStyleColumn></SmallStyleColumn>
          </StyleSelectorContainer>
        </Content>
      );
      break;
    case SlideElementInfoSelections.INTERACTION:
      content = <div>TODO</div>;
      break;
  }

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

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

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};
`;
