// Vendor
import * as React from 'react';
import { number } from '@storybook/addon-knobs';

// Internal
import readme from '../README.md';
import { addition, subtraction } from './index';
import { name } from '../package.json';

const story = (stories: any) => {
  const earth = (
    <span aria-label="Global" role="img">
      🌎
    </span>
  );

  const demo = () => {
    const options = {
      max: 10,
      min: 0,
      range: true,
      step: 1
    };

    const number1 = number('Number 1', 4, options);
    const number2 = number('Number 2', 3, options);
    const additionResult = addition(number1, number2);
    const subtractionResult = subtraction(number1, number2);

    return (
      <div className="layout-sections">
        <section>
          <h1 className="storybook head">Utility Package</h1>
          <h2 className="storybook subhead">Not for production use!</h2>
          <ol>
            <li>
              This is a{' '}
              <strong>
                {earth}public {earth}
              </strong>{' '}
              which will be available on the NPM registry to the general public.
            </li>
            <li>Interactive demo of a non React based package</li>
          </ol>
        </section>
        <section>
          <p>
            This technique may prove useful for any high-level helpers or
            utility packages we create. Not to be confused as a replacement for
            good tests, rather a way to further improve visibility around what
            we&apos;ve already built.
          </p>
          <h2>Addition</h2>
          <p>
            {number1} + {number2} = {additionResult}
          </p>
          <h2>Subtraction</h2>
          <p>
            {number1} - {number2} = {subtractionResult}
          </p>
        </section>
      </div>
    );
  };

  // Now we load up a simple story for this component
  stories.addParameters({ readme: { sidebar: readme } });
  stories.addWithJSX(name, demo);
};

export { story as OpenSource };