import styled from "@emotion/styled";
import { inject, observer } from "mobx-react";
import React from "react";
import { FaChessBoard, FaTable } from "react-icons/fa";
import { FiSquare, FiType } from "react-icons/fi";
import { GoComment } from "react-icons/go";
import {
  LIGHT_PRIMARY_THREE,
  LIGHT_SECONDARY_FIVE,
  LIGHT_SHADOW,
  LIGHT_TERTIARY_ONE,
  LIGHT_TERTIARY_TWO,
} from "../../shared/colors";
import { SlideObjectType } from "../../shared/types";
import { CurrentUser_me } from "../graphql/generated/types";
import { StoreProps } from "../platform/SlideshowStore";
import withPlatform, { PlatformProps } from "../platform/withPlatform";

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

function SlideItemToggler(props: Props) {
  const slideItemSelector = props.store.createItemSelector.get();

  return (
    <Container>
      <ItemToggler
        active={slideItemSelector === SlideObjectType.TEXT}
        onClick={() => props.store.createItemSelector.set(SlideObjectType.TEXT)}
      >
        <FiType />
      </ItemToggler>
      <ItemToggler
        active={slideItemSelector === SlideObjectType.RECTANGLE}
        onClick={() =>
          props.store.createItemSelector.set(SlideObjectType.RECTANGLE)
        }
      >
        <FiSquare />
      </ItemToggler>
      <ItemToggler
        active={slideItemSelector === SlideObjectType.COMMENT}
        onClick={() =>
          props.store.createItemSelector.set(SlideObjectType.COMMENT)
        }
      >
        <GoComment />
      </ItemToggler>
      <ItemToggler
        active={slideItemSelector === SlideObjectType.AIRTABLE}
        onClick={() =>
          props.store.createItemSelector.set(SlideObjectType.AIRTABLE)
        }
      >
        <FaTable />
      </ItemToggler>
      <ItemToggler
        active={slideItemSelector === SlideObjectType.BOARD}
        onClick={() =>
          props.store.createItemSelector.set(SlideObjectType.BOARD)
        }
      >
        <FaChessBoard />
      </ItemToggler>
    </Container>
  );
}

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

const ItemToggler = styled.div<{ active: boolean }>`
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid ${LIGHT_PRIMARY_THREE};
  :hover {
    background-color: ${(props) =>
      props.active ? LIGHT_PRIMARY_THREE : LIGHT_SECONDARY_FIVE};
    border: 1px solid
      ${(props) => (props.active ? LIGHT_TERTIARY_TWO : LIGHT_SECONDARY_FIVE)};
  }
  :first-of-type {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }
  :last-of-type {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  ${(props) =>
    props.active &&
    `background-color: ${LIGHT_PRIMARY_THREE};
    border: 1px solid ${LIGHT_TERTIARY_ONE};
    color: ${LIGHT_TERTIARY_ONE};`}
  transition: 0.08s ease-in-out;
`;

const Container = styled.div`
  position: absolute;
  z-index: 5;
  top: 16px;
  left: 16px;
  display: flex;
  height: 36px;
  width: 144px;
  background-color: ${LIGHT_PRIMARY_THREE};
  border-radius: 8px;
  box-shadow: 0px 1px 5px 0px ${LIGHT_SHADOW};
`;