import React from "react";
import { storiesOf } from "@storybook/react";

import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
import jsx from "react-syntax-highlighter/dist/esm/languages/prism/jsx";
import { xonokai } from "react-syntax-highlighter/dist/esm/styles/prism";

import AlertBar from "components/UI/AlertBar";
import Box from "components/UI/Box";
import Button from "components/UI/Button";
import Text from "components/UI/Text/Text";
import Provider from "components/Context/Provider";
import { InlineCode, Link } from "../../../Theme/components";

import Notification from "./Notify";

const sectionStyleProp = {
  padding: "zero",
  marginY: "lg",
  flexDirection: "column",
};

const positions = [
  "top-left",
  "top-center",
  "top-right",
  "bottom-left",
  "bottom-center",
  "bottom-right",
];

SyntaxHighlighter.registerLanguage("jsx", jsx);

const importCode = `import Notification from "relements/build/esm/overlays/notification";`;
const basicCode = `Notification.send({
    title: "Test",
    message: "This is a test notification",
  })`;

const offsetCode = `Notification.send({
    title: "Test",
    message: "This is a test notification",
    position: "top-center",
    offset: {top: 80, left: 0}
  })`;

const positionCode = `Notification.send({
    title: Test,
    message: "This is a test notification",
    position: <position_value>
  })`;

const closeCode = ` Notification.send({
    title: "Test",
    message: "This is a test notification",
    autoDismiss: false,
    closeable: true,
  })`;

const autoDismissCode = ` Notification.send({
    title: "Test",
    message: "This is a test notification",
    autoDismiss: false,
  })`;

const typeCode = ` Notification.send({
    title: "Test",
    message: "This is a test notification",
    type: "success", // warning, error
  })`;

const childrenCode = ` Notification.send({
    title: "Test",
    message: "This is a test notification",
    children: <AlertBar active message="Alright!" />
  })`;

const destroyCode = ` Notification.destroyAll()`;

const divider = () => (
  <div
    style={{
      borderBottom: "1px solid #ddd",
      marginBottom: 22,
    }}
  />
);

storiesOf("Components|Overlays").add("Notifications", () => {
  const renderPositionCTAs = () => {
    let retData = [];
    positions.forEach((item, i) => {
      retData.push(
        <Button
          themed
          key={`ctaPosNotif-${i}`}
          onClick={() =>
            Notification.send({
              title: `${item}`,
              message: "This is a test notification",
              position: item,
            })
          }
        >
          {item}
        </Button>,
      );
    });
    return retData;
  };

  const renderPosition = () => {
    let retData = [];
    positions.forEach((item, i) => {
      retData.push(<InlineCode key={`posNotif-${i}`}>{item}</InlineCode>);
    });
    return retData;
  };

  const story = (
    <Provider>
      <Box
        {...sectionStyleProp}
        onClick={() => {
          Notification.send({
            title: "test",
            message: "This is a test notification",
            closeable: true,
            autoDismiss: false,
          });
        }}
      >
        <Text variant="display-2.semi-bold">Notifications 🚨</Text>
      </Box>

      <Box {...sectionStyleProp}>
        <Text variant="body.md">
          First, import <InlineCode>Notification</InlineCode> in your file
        </Text>
        <SyntaxHighlighter language="jsx" style={xonokai}>
          {importCode}
        </SyntaxHighlighter>
      </Box>
      {divider()}
      <Box {...sectionStyleProp}>
        <Text variant="h2.semi-bold">Usage</Text>
        <Text variant="body.md">
          Notifications can be simply invoked by the following
        </Text>
        <Box></Box>
        <SyntaxHighlighter language="jsx" style={xonokai}>
          {basicCode}
        </SyntaxHighlighter>
      </Box>

      {divider()}
      <Box {...sectionStyleProp}>
        <Text variant="h2.semi-bold">Positions 🧭</Text>
        <Text variant="body.md">
          Currently, we're supporting 6 basic areas of render
        </Text>
        <Box style={{ paddingLeft: 0 }}>{renderPositionCTAs()}</Box>

        <Text variant="body.md">
          Use following values for position: {renderPosition()}
        </Text>
        <SyntaxHighlighter language="jsx" style={xonokai}>
          {positionCode}
        </SyntaxHighlighter>
        <Text variant="body.md">
          If value is not provided, by default, Notifications will render from
          bottom center
        </Text>
      </Box>

      {divider()}
      <Box {...sectionStyleProp}>
        <Text variant="h2.semi-bold">Offset 🔧</Text>
        <Text variant="body.md">
          To adjust your notification's position - just add{" "}
          <InlineCode>offset</InlineCode>
        </Text>
        <Box style={{ paddingLeft: 0 }}>
          <Button
            themed
            onClick={() =>
              Notification.send({
                title: "Test",
                message: "This is a test notification",
                position: "top-center",
                offset: { top: 80, left: 0 },
              })
            }
          >
            Open Notification slightly below the normal
          </Button>
        </Box>
        <SyntaxHighlighter language="jsx" style={xonokai}>
          {offsetCode}
        </SyntaxHighlighter>
      </Box>

      {divider()}
      <Box {...sectionStyleProp}>
        <Text variant="h2.semi-bold">Auto Dismiss 🔧</Text>
        <Text variant="body.md">
          Don't want notification to go away? Add
          <InlineCode>autoDismiss</InlineCode>
        </Text>
        <Box style={{ paddingLeft: 0 }}>
          <Button
            themed
            onClick={() =>
              Notification.send({
                title: "Test",
                message: "This is a test notification",
                autoDismiss: false,
                closeable: false,
              })
            }
          >
            Click to open
          </Button>
        </Box>
        <SyntaxHighlighter language="jsx" style={xonokai}>
          {autoDismissCode}
        </SyntaxHighlighter>
      </Box>

      {divider()}
      <Box {...sectionStyleProp}>
        <Text variant="h2.semi-bold">Closeable 🔧</Text>
        <Text variant="body.md">
          Want to play God? Add
          <InlineCode>closeable</InlineCode>
        </Text>
        <Box style={{ paddingLeft: 0 }}>
          <Button
            themed
            onClick={() =>
              Notification.send({
                title: "Test",
                message: "This is a test notification",
                autoDismiss: false,
                closeable: true,
              })
            }
          >
            Click to open
          </Button>
        </Box>
        <SyntaxHighlighter language="jsx" style={xonokai}>
          {closeCode}
        </SyntaxHighlighter>
      </Box>

      {divider()}
      <Box {...sectionStyleProp}>
        <Text variant="h2.semi-bold">Types 👻</Text>
        <Text variant="body.md">
          Want to display good news or bad? Add
          <InlineCode>type</InlineCode>
        </Text>
        <Box style={{ paddingLeft: 0 }}>
          <Button
            themed
            onClick={() =>
              Notification.send({
                title: "Test",
                message: "This is a test notification",
                type: "success",
                closeable: true,
              })
            }
          >
            Good news!
          </Button>

          <Button
            themed
            onClick={() =>
              Notification.send({
                title: "Test",
                message: "This is a test notification",
                type: "warning",
                closeable: true,
              })
            }
          >
            Meh
          </Button>

          <Button
            themed
            onClick={() =>
              Notification.send({
                title: "Test",
                message: "This is a test notification",
                type: "error",
                closeable: true,
              })
            }
          >
            Bad News!
          </Button>
        </Box>
        <SyntaxHighlighter language="jsx" style={xonokai}>
          {typeCode}
        </SyntaxHighlighter>
      </Box>

      {divider()}
      <Box {...sectionStyleProp}>
        <Text variant="h2.semi-bold">Children 🤰</Text>
        <Text variant="body.md">
          "I wanna show off some other stuff in notification". Sure, add
          <InlineCode>children</InlineCode>
          and pass any DOM element there
        </Text>
        <Box style={{ paddingLeft: 0 }}>
          <Button
            themed
            onClick={() =>
              Notification.send({
                title: "Test",
                autoDismiss: false,
                closeable: true,
                children: <AlertBar active message="Alright!" />,
              })
            }
          >
            Click to open
          </Button>
        </Box>
        <SyntaxHighlighter language="jsx" style={xonokai}>
          {childrenCode}
        </SyntaxHighlighter>
      </Box>

      {divider()}
      <Box {...sectionStyleProp}>
        <Text variant="h2.semi-bold">Destroy all!</Text>
        <Text variant="body.md">Destroy everything at once!</Text>
        <Box style={{ paddingLeft: 0 }}>
          <Button
            themed
            onClick={() =>
              Notification.send({
                title: "Test",
                autoDismiss: false,
              })
            }
          >
            Click to open
          </Button>

          <Button themed onClick={() => Notification.destroyAll()}>
            Destroy!
          </Button>
        </Box>
        <SyntaxHighlighter language="jsx" style={xonokai}>
          {destroyCode}
        </SyntaxHighlighter>
      </Box>
    </Provider>
  );
  return story;
});
