import styled from "@emotion/styled";
import { inject, observer } from "mobx-react";
import React from "react";
import SimpleBar from "simplebar-react";
import { v4 } from "uuid";
import {
  LIGHT_PRIMARY_ONE,
  LIGHT_PRIMARY_THREE,
  LIGHT_PRIMARY_TWO,
  LIGHT_SECONDARY_TWO,
  LIGHT_TERTIARY_ONE,
  LIGHT_TERTIARY_THREE,
} from "../../shared/colors";
import { ID } from "../../shared/types";
import { CurrentUser_me } from "../graphql/generated/types";
import { SocketActions, StoreProps } from "../platform/SlideshowStore";
import withPlatform, { PlatformProps } from "../platform/withPlatform";
import Plus from "./icons/Plus";

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

function SlideSelector(props: Props) {
  const orderedSlideKeys = Array.from(props.store.slides.keys()).sort(
    (a: ID, b: ID) => {
      return (
        props.store.slides.get(a)!.index - props.store.slides.get(b)!.index
      );
    }
  );

  const createNewSlide = () => {
    const id = v4();
    props.store.emit(SocketActions.CREATE_SLIDE, {
      id,
      content: {},
      index: Array.from(props.store.slides.keys()).length,
    });
  };

  return (
    <Container>
      <SimpleBar
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          height: "100%",
          width: "100%",
        }}
      >
        {orderedSlideKeys.map((slideKey: ID, index: number) => {
          const isActive = props.store.currentSlide.get() === slideKey;
          return (
            <SlideCardHolder key={slideKey} active={isActive}>
              <Number active={isActive}>{index}</Number>
              <SlideCard
                active={isActive}
                onClick={() => props.store.currentSlide.set(slideKey)}
              />
              <Blank />
            </SlideCardHolder>
          );
        })}
        <CreateSlideButton onClick={createNewSlide}>
          <Plus />
          <div style={{ marginTop: 10 }}>Create Slide</div>
        </CreateSlideButton>
      </SimpleBar>
    </Container>
  );
}

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

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 100%;
  min-width: 240px;
  background-color: ${LIGHT_PRIMARY_TWO};
  border-right: 1px solid ${LIGHT_PRIMARY_ONE};
`;

const SlideCardHolder = styled.div<{ active: boolean }>`
  display: flex;
  margin-top: 20px;
  width: 200px;
`;

const Blank = styled.div`
  width: 40px;
  height: 100%;
`;

const Number = styled.div<{ active: boolean }>`
  display: flex;
  align-items: center;
  justify-content: center;
  color: ${(props) =>
    props.active ? LIGHT_TERTIARY_ONE : LIGHT_SECONDARY_TWO};
  font-size: 12px;
  width: 40px;
  height: 100%;
  font-weight: ${(props) => (props.active ? "bold" : "400")};
`;

const SlideCard = styled.div<{ active: boolean }>`
  margin-left: auto;
  margin-right: auto;
  ldisplay: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 120px;
  border-radius: 8px;
  border: 1px solid ${LIGHT_TERTIARY_THREE};
  background-color: ${LIGHT_PRIMARY_THREE};
`;

const CreateSlideButton = styled.div`
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 120px;
  border-radius: 8px;
  border: 1px solid ${LIGHT_TERTIARY_THREE};
  background-color: ${LIGHT_PRIMARY_THREE};
  color: ${LIGHT_SECONDARY_TWO};
`;