import React from "react";
import { bem } from "../../utilities/bem";
import { Box } from "../Box";
import { Fixed } from "../Fixed";
import { Heading } from "../Heading";
import { Paragraph } from "../Paragraph";
import { Relative } from "../Relative";
import { Absolute } from "../Absolute";
import { CloseButton } from "../CloseButton";

const cn = "MarkdownHelp";

const CodeExamples = ({
  heading,
  headingLevel = 3,
  children,
}: {
  heading: string;
  children: string[];
  headingLevel?: 3 | 4;
}) => (
  <>
    {headingLevel === 3 ? (
      <Heading.H3 className="text-gray-400">{heading}</Heading.H3>
    ) : (
      <Heading.H4 className="text-gray-400">{heading}</Heading.H4>
    )}
    <Box as="pre" className={bem(cn, { e: "preformattedText" })}>
      {React.Children.map(children, (child) => (
        <Box key={child}>{child}</Box>
      ))}
    </Box>
  </>
);

export const MarkdownHelp = ({
  isOpen,
  onClose,
}: {
  isOpen: boolean;
  onClose: () => void;
}) => {
  return isOpen ? (
    <Fixed className={bem(cn)}>
      <Fixed className={bem(cn, { e: "panel" })}>
        <Relative className={bem(cn, { e: "header" })}>
          <CloseButton
            className={bem(cn, { e: "closeButton" })}
            onClick={onClose}
          />
        </Relative>

        <Box className={bem(cn, { e: "scrollBox" })}>
          <Heading.H2 className="text-gray-400">Markdown help</Heading.H2>
          <Paragraph className="text-gray-400 mb-4 mt-4">
            Here’s an overview of Markdown syntax that you can use within the
            editor.
          </Paragraph>
          <CodeExamples heading="Headers">
            {[
              "# This is an <h1> tag",
              "## This is an <h2> tag",
              "### This is an <h3> tag",
              "#### This is an <h4> tag",
              "##### This is an <h5> tag",
              "###### This is an <h6> tag",
            ]}
          </CodeExamples>

          <CodeExamples heading="Emphasis">
            {[
              "*This text will be italic*",
              "_This will also be italic_",
              "**This text will be bold**",
              "__This will also be bold__",
              "_You **can** combine them_",
            ]}
          </CodeExamples>

          <Heading.H3 className="text-gray-400 my-4">Lists</Heading.H3>
          <CodeExamples heading="Unordered" headingLevel={4}>
            {["* Item 1", "* Item 2", "  * Item 2a", "  * Item 2b"]}
          </CodeExamples>
          <CodeExamples heading="Ordered" headingLevel={4}>
            {["1. Item 1", "1. Item 2", "  1. Item 2a", "  1. Item 2b"]}
          </CodeExamples>

          <CodeExamples heading="Link">
            {[
              "http://www.aptible.com - automatic",
              "[Aptible](http://www.aptible.com)",
            ]}
          </CodeExamples>

          <CodeExamples heading="Blockquote">
            {["> This is a quote that someone said."]}
          </CodeExamples>

          <CodeExamples heading="Preformatted text / inline code">
            {["I think you should use a `div` element here."]}
          </CodeExamples>

          <CodeExamples heading="Code block">
            {["```", "An example code block", "```"]}
          </CodeExamples>

          <CodeExamples heading="Divider">{["---"]}</CodeExamples>

          <CodeExamples heading="Line breaks">
            {[
              "To add a line break instead of a return,··↵",
              "put two spaces at the end of the line and press return.",
              "↵",
              "To add a line return, or to start a new paragraph, put a full↵",
              "↵",
              "return between the lines.",
            ]}
          </CodeExamples>

          <Heading.H3 className="text-gray-400 my-4">Images</Heading.H3>
          <CodeExamples heading="Inline" headingLevel={4}>
            {["![alt text](https://www.aptible.com/image.jpg)"]}
          </CodeExamples>
          <CodeExamples heading="Reference" headingLevel={4}>
            {[
              "![alt text][image]",
              "[image]: https://www.aptible.com/image.jpg",
            ]}
          </CodeExamples>
        </Box>
      </Fixed>
      <Absolute className={bem(cn, { e: "cover" })} onClick={onClose} />
    </Fixed>
  ) : null;
};