import React from "react";
import { storiesOf } from "@storybook/react";
import { ConfigBlock } from "@src/helpers/DocBlocks";

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 { ANIMATIONS } from "@src/Theme/animate";
import Box from "../UI/Box";
import Tabs from "../UI/Tabs";
import Button from "../UI/Button";
import Text from "../UI/Text/Text";
import Provider from "../Context/Provider";
import Dropdown from "../Inputs/Dropdown";
import { InlineCode } from "../../Theme/components";

import Animate from "../Animate";

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

const fadePreStyle = {
  height: "23px",
};

const boxSectionStyle = {
  padding: "10px",
  border: "1px solid #ddd",
  borderRadius: "4px",
  width: "475px",
};

SyntaxHighlighter.registerLanguage("jsx", jsx);

const importCode = `import Animate from "relements/build/esm/layouts/animate";`;
const fadeVariantCode = ` <Animate entry="fade">This is a text</Animate>`;
const fadeDirectionCode = (direction, exitDirection) =>
  `<Animate entry="fade-${direction}" exit="fade-${exitDirection}" active={true}>This is a text</Animate>`;

const playgroundOptions = [
  { text: "Fade Up", value: "up" },
  { text: "Fade Down", value: "down" },
  { text: "Fade Left", value: "left" },
  { text: "Fade Right", value: "right" },
];

storiesOf("Design System-Helpers|Animate", module).add("Documentation", () => {
  const renderAnimations = () => {
    const retArr = [];

    Object.keys(ANIMATIONS).forEach(item => {
      const animation = ANIMATIONS[item];
      retArr.push(animation.charAt(0).toUpperCase() + animation.slice(1));
    });

    return retArr.toString();
  };
  const story = (
    <Provider>
      <Box {...sectionStyleProp}>
        <Text variant="display-2.semi-bold">Animate 🌟</Text>
        <Text variant="body.md">
          Animate can be used to add transitions to its children every time they
          appear/disappear from the DOM
        </Text>

        <SyntaxHighlighter language="jsx" style={xonokai}>
          {importCode}
        </SyntaxHighlighter>
        <br />

        <Text variant="h2.semi-bold">Configuration</Text>
        <br />
        <ConfigBlock of={Animate} />

        <Text variant="h2.semi-bold">Currently supported transitions</Text>
        <Text>{renderAnimations()}</Text>
      </Box>
    </Provider>
  );
  return story;
});

storiesOf("Design System-Helpers|Animate", module).add("Fade", () => {
  const [fadeUp, setFadeUp] = React.useState(true);
  const [fadeDown, setFadeDown] = React.useState(true);
  const [fadeLeft, setFadeLeft] = React.useState(true);
  const [fadeRight, setFadeRight] = React.useState(true);

  const [entry, setEntry] = React.useState("");
  const [exit, setExit] = React.useState("");
  const [active, setActive] = React.useState(false);

  const [currTab, setCurrTab] = React.useState("bots");

  const story = (
    <Provider>
      <Box {...sectionStyleProp}>
        <Text variant="display-2.semi-bold">Fade </Text>
      </Box>

      <Box {...sectionStyleProp}>
        <Text variant="body.md">
          First, import <InlineCode>Animate</InlineCode> component to your file
          like -
        </Text>
        <SyntaxHighlighter language="jsx" style={xonokai}>
          {importCode}
        </SyntaxHighlighter>
      </Box>

      <Box {...sectionStyleProp}>
        <Text variant="body.md">Basic Usage - Entry | Exit</Text>
        <SyntaxHighlighter language="jsx" style={xonokai}>
          {fadeVariantCode}
        </SyntaxHighlighter>
        <pre>
          <Animate entry="fade">This is a text</Animate>
        </pre>
        <Text variant="body.md">Directions</Text>
        <Box
          style={{ paddingLeft: "0", columnGap: "30px", marginBottom: "20px" }}
        >
          <div style={boxSectionStyle}>
            <InlineCode>Fade Up / Fade Down</InlineCode>
            <SyntaxHighlighter language="jsx" style={xonokai}>
              {fadeDirectionCode("up", "down")}
            </SyntaxHighlighter>

            <pre style={fadePreStyle}>
              {
                <Animate active={fadeUp} entry="fade-up" exit="fade-down">
                  I go up!
                </Animate>
              }
            </pre>
            <Button
              themed
              onClick={() => {
                setFadeUp(true);
              }}
            >
              Do it again!
            </Button>

            <Button
              themed
              onClick={() => {
                setFadeUp(false);
              }}
            >
              Dismiss
            </Button>
          </div>

          <div style={boxSectionStyle}>
            <InlineCode>Fade Down / Fade Up</InlineCode>
            <SyntaxHighlighter language="jsx" style={xonokai}>
              {fadeDirectionCode("down", "up")}
            </SyntaxHighlighter>

            <pre style={fadePreStyle}>
              {
                <Animate active={fadeDown} entry="fade-down" exit="fade-up">
                  I come down!
                </Animate>
              }
            </pre>
            <Button
              themed
              onClick={() => {
                setFadeDown(true);
              }}
            >
              Do it again!
            </Button>

            <Button
              themed
              onClick={() => {
                setFadeDown(false);
              }}
            >
              Dismiss
            </Button>
          </div>
        </Box>
        <Box style={{ paddingLeft: "0", columnGap: "30px" }}>
          <div style={boxSectionStyle}>
            <InlineCode>Fade Left / Fade Right</InlineCode>
            <SyntaxHighlighter language="jsx" style={xonokai}>
              {fadeDirectionCode("left", "right")}
            </SyntaxHighlighter>

            <pre style={fadePreStyle}>
              <Animate active={fadeLeft} entry="fade-left" exit="fade-right">
                I go left!
              </Animate>
            </pre>
            <Button
              themed
              onClick={() => {
                setFadeLeft(true);
              }}
            >
              Do it again!
            </Button>
            <Button
              themed
              onClick={() => {
                setFadeLeft(false);
              }}
            >
              Dismiss
            </Button>
          </div>

          <div style={boxSectionStyle}>
            <InlineCode>Fade Right / Fade Left</InlineCode>
            <SyntaxHighlighter language="jsx" style={xonokai}>
              {fadeDirectionCode("right", "left")}
            </SyntaxHighlighter>

            <pre style={fadePreStyle}>
              <Animate active={fadeRight} entry="fade-right" exit="fade-left">
                I go right!
              </Animate>
            </pre>
            <Button
              themed
              onClick={() => {
                setFadeRight(true);
              }}
            >
              Do it again!
            </Button>
            <Button
              themed
              onClick={() => {
                setFadeRight(false);
              }}
            >
              Dismiss
            </Button>
          </div>
        </Box>
        <br />
        <Box
          style={{
            background: "#f5f5f5",
            borderRadius: 5,
            marginBottom: 20,
            padding: 20,
            maxWidth: 400,
            flexDirection: "column",
          }}
        >
          <Text variant="h3.bold">Playground 🏓</Text>
          <Text variant="body.md">Select a value in Exit to begin</Text>
          <pre style={fadePreStyle}>
            <Animate
              active={active}
              entry={`fade-${entry}`}
              exit={`fade-${exit}`}
            >
              Take me places!
            </Animate>
          </pre>
          <Box style={{ columnGap: 20, padding: 0 }}>
            <Dropdown
              themed
              placeholder="Select a value"
              options={playgroundOptions}
              label="Entry Animation"
              value={`${entry &&
                "Fade " + entry.charAt(0).toUpperCase() + entry.slice(1)}`}
              onChange={value => {
                setEntry(value.value);

                setTimeout(() => {
                  setActive(true);
                }, 100);
              }}
            />

            <Dropdown
              themed
              placeholder="Select a value"
              options={playgroundOptions}
              label="Exit Animation"
              value={`${exit &&
                "Fade " + exit.charAt(0).toUpperCase() + exit.slice(1)}`}
              onChange={value => {
                setExit(value.value);
                setTimeout(() => {
                  setActive(false);
                }, 100);
              }}
            />
          </Box>
        </Box>

        {/* Cool Usage */}
        <Text variant="body.md">Cool Usage 😎</Text>
        <pre>
          <Tabs value={currTab} themed>
            <Tabs.Item
              value="bots"
              onClick={() => {
                setCurrTab("bots");
              }}
              themed={true}
            >
              Bots
            </Tabs.Item>
            <Tabs.Item
              value="templates"
              onClick={() => {
                setCurrTab("templates");
              }}
              themed={true}
            >
              Templates
            </Tabs.Item>
            <Tabs.Item
              value="businesses"
              onClick={() => {
                setCurrTab("businesses");
              }}
              themed={true}
            >
              Businesses
            </Tabs.Item>
          </Tabs>

          <br />
          <div>
            {currTab === "bots" && (
              <Animate entry="fade-left" exit="fade-left">
                <Button>This is a test</Button>
              </Animate>
            )}

            {currTab === "templates" && (
              <Animate entry="fade-left" exit="fade-left">
                Templates tab
              </Animate>
            )}

            {currTab === "businesses" && (
              <Animate entry="fade-left" exit="fade-left">
                Businesses tab
              </Animate>
            )}
          </div>
          <br />
        </pre>
      </Box>
    </Provider>
  );
  return story;
});
