import { Story, Meta } from "@storybook/react";
import Text, { TextProps } from "./Text";
import Block from "./../Block";

export default {
  title: "Component/Atoms/Text",
  component: Text,
  parameters: {
    component: Text,
    previewTabs: {
      canvas: {
        hidden: true,
      },
    },
    viewMode: "docs",
  },
} as Meta;

interface ExampleProps {
  children?: React.ReactNode;
  classes: string;
}

const Template: Story<TextProps> = (args) => (
  <Text {...args}>
    Text is a wrapper for any html element that will be used inline
  </Text>
);

const Example: Story<ExampleProps> = (args) => {
  const { classes } = args;
  return classes ? (
    <Block className={args.classes}>{args.children}</Block>
  ) : (
    <>{args.children}</>
  );
};

export const Properties = Template.bind({});
Properties.args = {};

const fontSizes = [
  "text-8xl",
  "text-7xl",
  "text-6xl",
  "text-5xl",
  "text-4xl",
  "text-3xl",
  "text-2xl",
  "text-xl",
  "text-lg",
  "text-base",
  "text-md",
  "text-sm",
  "text-xs",
];

const lineHeights = [
  "leading-3",
  "leading-4",
  "leading-5",
  "leading-6",
  "leading-7",
  "leading-8",
  "leading-9",
  "leading-10",
  "leading-none",
  "leading-tight",
  "leading-snug",
  "leading-normal",
  "leading-relaxed",
  "leading-loose",
];

const textTracking = [
  "tracking-tighter",
  "tracking-tight",
  "tracking-normal",
  "tracking-wide",
  "tracking-wider",
  "tracking-widest",
];

const TextColorsSome = [
  "text-pink-A400",
  "text-purple-A400",
  "text-deepPurple-A400",
  "text-indigo-A400",
  "text-blue-A400",
  "text-lightBlue-A400",
  "text-cyan-A400",
  "text-teal-A400",
  "text-green-A400",
  "text-lightGreen-A400",
  "text-lime-A400",
  "text-yellow-A400",
  "text-orange-A400",
  "text-deepOrange-A400",
  "text-red-A400",
  "text-brown-A400",
  "text-grey-A400",
];

export const FontSizes = Example.bind({});
FontSizes.args = {
  children: fontSizes.map((element) => (
    <Text className={element}>{element}</Text>
  )),
  classes: "p-12 flex flex-col space-y-3",
};

/**
 * All tailwind css classes available for Lne heights
 */

export const TextLineHeights = Example.bind({});
TextLineHeights.args = {
  children: lineHeights.map((element) => (
    <Text className={element}>
      {element} {element} {element} {element} {element} {element} {element}
      {element} {element} {element} {element} {element} {element} {element}
      {element}
    </Text>
  )),
  classes: "p-12 flex flex-col space-y-6",
};

export const TextTracking = Example.bind({});
TextTracking.args = {
  children: textTracking.map((element) => (
    <Text className={element}>Lorem ipsum dolor amet subway tile.</Text>
  )),
  classes: "flex flex-col p-12 leading-8",
};

export const TextColors = Example.bind({});
TextColors.args = {
  children: TextColorsSome.map((element) => (
    <Text className={element}>{element}</Text>
  )),
  classes: "flex flex-col p-12 font-medium text-lg space-y-3",
};

export const HtmlStyledElements = Example.bind({});
HtmlStyledElements.args = {
  children: (
    <>
      <h1>An h1 header</h1>
      <p>Paragraphs are separated by a blank line.</p>
      <p>
        2nd paragraph. <em> Italic </em> , <strong> bold </strong> , and
        <code> monospace </code>
      </p>
      <p>Itemized lists look like:</p>
      <ul>
        <li>this one</li>
        <li>that one</li>
        <li>the other one</li>
      </ul>
      <p>
        Note that &mdash; not considering the asterisk &mdash; the actual text
        content starts at 4-columns in.
      </p>
      <blockquote>
        <p>Block quotes are written like so.</p>
        <p>They can span multiple paragraphs, if you like.</p>
      </blockquote>
      <p>
        Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex.,
        &ldquo;it&rsquo;s all in chapters 12&ndash;14&rdquo;). Three dots
        &hellip; will be converted to an ellipsis. Unicode is supported. ☺
      </p>
      <h2>An h2 header</h2>
      <p>Here&rsquo;s a numbered list:</p>
      <ol>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
      </ol>
      <p>Code example</p>
      <pre>
        <code># Let me re-iterate ...for i in 1 .. 10</code>
      </pre>
      <h3>An h3 header</h3>
      <p>Now a nested list:</p>
      <ol>
        <li>
          <p>First, get these ingredients:</p>
          <ul>
            <li>carrots</li>
            <li>celery</li>
            <li>lentils</li>
          </ul>
        </li>
        <li>
          <p>Boil some water.</p>
        </li>
        <li>
          <p>Dump everything in the pot and follow this algorithm:</p>

          <p>Do not bump wooden spoon or it will fall.</p>
        </li>
      </ol>
      <p>
        Notice again how text always lines up on 4-space indents (including that
        last line which continues item 3 above).
      </p>
      <p>
        Here&rsquo;s a link to <a href="http://foo.bar"> a website </a> , to a
        <a href="local-doc.html"> local doc </a> , and to a
        <a href="#an-h2-header"> section heading in the current doc </a> .
        Here&rsquo;s a footnote
        <a href="#fn1">
          <sup> 1 </sup>
        </a>
        .
      </p>
      <p>Tables can look like this:</p>
      <table>
        <caption>Shoes sizes, materials, and colors.</caption>
        <thead>
          <tr>
            <th>Name</th>
            <th>Size</th>
            <th>Material</th>
            <th>Color</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>All Business</td>
            <td>9</td>
            <td>leather</td>
            <td>brown</td>
          </tr>
          <tr>
            <td>Roundabout</td>
            <td>10</td>
            <td>hemp canvas</td>
            <td>natural</td>
          </tr>
          <tr>
            <td>Cinderella</td>
            <td>11</td>
            <td>glass</td>
            <td>transparent</td>
          </tr>
        </tbody>
      </table>
      <p>
        (The above is the caption for the table.) Pandoc also supports
        multi-line tables:
      </p>
      <table>
        <colgroup>
          <col /> <col />
        </colgroup>
        <thead>
          <tr>
            <th>Keyword</th>
            <th>Text</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>red</td>
            <td>Sunsets, apples, and other red or reddish things.</td>
          </tr>
          <tr>
            <td>green</td>
            <td>
              Leaves, grass, frogs and other things it&rsquo;s not easy being.
            </td>
          </tr>
        </tbody>
      </table>
      <p>A horizontal rule follows.</p>
      <hr />
      <p>Here&rsquo;s a definition list:</p>
      <dl>
        <dt>apples</dt>
        <dd>Good for making applesauce.</dd>
        <dt>oranges</dt>
        <dd>Citrus!</dd>
        <dt>tomatoes</dt>
        <dd>There&rsquo;s no &ldquo;e&rdquo; in tomatoe.</dd>
      </dl>
      <p>
        Again, text is indented 4 spaces. (Put a blank line between each term
        and its definition to spread things out more.)
      </p>
      <p>
        Here&rsquo;s a &ldquo;line block&rdquo; (note how whitespace is
        honored):
      </p>
      <div>
        Line one <br /> Line too <br /> Line tree
      </div>
      <p>and images can be specified like so:</p>
      <figure>
        <img
          src="https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg"
          alt="Wiki"
        />
        <figcaption>example image</figcaption>
      </figure>
      <p>
        Inline math equation: &omega; = d ϕ / d t &omega;=dϕ/dt . Display math
        should get its own line like so:
      </p>
      <p>I = &int; &rho; R 2 d V I=&int;&rho;R2dV</p>
      <p>
        And note that you can backslash-escape any punctuation characters which
        you wish to be displayed literally, ex.: `foo`, *bar*, etc.
      </p>
    </>
  ),
  classes: "prose lg:prose-xl",
};
