import styled from "@emotion/styled";
import { inject, observer } from "mobx-react";
import React, { useEffect } from "react";
import {
  LIGHT_PRIMARY_THREE,
  LIGHT_SECONDARY_ONE,
  LIGHT_SECONDARY_THREE,
} from "../../../shared/colors";
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;

const prefilledText = [{ type: "paragraph", children: [{ text: "" }] }];

function ChangelogModal(props: Props) {
  useEffect(() => {
    props.manager.bind(
      "esc",
      () => props.store.showChangelogModal.set(false),
      "SearchModal",
      "Hide the modal.",
      2
    );
    return () => {
      props.manager.unbind("esc", "SearchModal");
    };
  });

  return (
    <Background onClick={() => props.store.showChangelogModal.set(false)}>
      <Container onClick={(e) => e.stopPropagation()}>
        <HeaderContainer>
          <Header>Changelog</Header>
        </HeaderContainer>
        <ContentContainer>
          <ChangelogItem>
            <ChangelogDate>June 30, 2019</ChangelogDate>
            <ChangelogContents>This is where it all started.</ChangelogContents>
          </ChangelogItem>
        </ContentContainer>
      </Container>
    </Background>
  );
}

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

const ChangelogContents = styled.div`
  display: flex;
  font-size: 14px;
  color: ${LIGHT_SECONDARY_ONE};
  width: 100%;
`;

const ChangelogItem = styled.div`
  display: flex;
`;

const ChangelogDate = styled.div`
  display: flex;
  min-width: 142px;
  margin-right: 44px;
  text-align: right;
  font-size: 14px;
  color: ${LIGHT_SECONDARY_THREE};
`;

const HeaderContainer = styled.div`
  margin-top: 80px;
  width: calc(100% - 378px);
  padding-left: 252px;
  padding-right: 126px;
  margin-bottom: 8px;
`;

const ContentContainer = styled.div`
  width: calc(100% - 252px);
  margin-left: 66px;
  margin-right: 126px;
  padding-top: 12px;
  height: 100%;
`;

const Header = styled.div`
  :active {
    outline: none;
  }
  :focus {
    outline: none;
  }
  caret-color: ${LIGHT_SECONDARY_ONE};
  font-weight: 700;
  font-size: 40px;
  :empty {
    background-color: #ff0000;
    color: gray;
  }
`;

const Background = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 10;
`;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 72px;
  left: 72px;
  right: 72px;
  margin-left: auto;
  margin-right: auto;
  max-width: 975px;
  min-width: 975px;
  height: calc(100% - 144px);
  border-radius: 4px;
  background-color: ${LIGHT_PRIMARY_THREE};
  box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
    rgba(15, 15, 15, 0.1) 0px 5px 10px, rgba(15, 15, 15, 0.2) 0px 15px 40px;
  z-index: 20;
`;