import React, { Fragment } from 'react';
import ReactHtmlParser from 'react-html-parser';
import MarkdownIt from 'markdown-it';
import { storiesOf } from '@storybook/react';
import { withKnobs, text, select } from '@storybook/addon-knobs';
import Heading from '../../atoms/headings/Heading';
import SidebarHeading from '../../atoms/headings/SidebarHeading';
import DecorativeLink from '../../atoms/links/DecorativeLink';
import { characters, letters, numbers, styles } from './typography.json';
import typographyOptions from './Typography.knobs.options';
import TypographyDocs from '../../../../../docs/style/typography.md';

import './styles.css';
import '../../../markdown.css';

var slugifyStyle = function slugifyStyle(style) {
  var _style$split = style.split(' '),
      weight = _style$split[0],
      italic = _style$split[1];

  return italic ? weight.toLowerCase() + '--' + italic.toLowerCase() : weight.toLowerCase();
};

var md = new MarkdownIt();
var reg = /\(\.\.\/(\.gitbook\/assets\/.*)\)/g;
var githubImageTypographyDocsFixed = TypographyDocs.replace(reg, function (match, contents) {
  return '(https://raw.githubusercontent.com/massgov/mayflower/develop/docs/' + contents + ')';
});
var result = md.render(githubImageTypographyDocsFixed);

storiesOf('brand|typography', module).addDecorator(withKnobs({ escapeHTML: false })).add('About', function () {
  return React.createElement(
    'div',
    { className: 'main-content main-content--two' },
    React.createElement(
      'div',
      { className: 'page-content' },
      React.createElement(
        'div',
        { className: 'markdown-body' },
        ReactHtmlParser(result)
      )
    )
  );
}).add('Texta (Main Font)', function () {
  var props = {
    text: text('custom text', 'Type something in the text knob, and use other knobs to change text styles.'),
    style: select('custom style', styles, 'Medium Italic'),
    size: select('custom size', typographyOptions.size, 'p')
  };
  var CustomElement = props.size;
  return React.createElement(
    'div',
    { className: 'main-content main-content--two' },
    React.createElement(
      'div',
      { className: 'page-content' },
      React.createElement(Heading, { text: 'Texta', level: 1 }),
      React.createElement(SidebarHeading, { title: 'Characters', level: 2 }),
      React.createElement(
        'div',
        { className: 'sb-block' },
        React.createElement(
          'div',
          { className: 'sb-text' },
          letters.toUpperCase()
        ),
        React.createElement(
          'div',
          { className: 'sb-text' },
          letters
        ),
        React.createElement('hr', null),
        React.createElement(
          'div',
          { className: 'sb-text' },
          numbers
        ),
        React.createElement('hr', null),
        React.createElement(
          'div',
          { className: 'sb-text' },
          characters
        ),
        React.createElement('hr', null)
      ),
      React.createElement(SidebarHeading, { title: 'Custom Sentence', level: 2 }),
      React.createElement(
        'div',
        { className: 'sb-block' },
        React.createElement(
          CustomElement,
          { className: 'ma-texta-' + slugifyStyle(props.style) },
          props.text
        )
      ),
      React.createElement(SidebarHeading, { title: 'Styles', level: 2 }),
      React.createElement(
        'div',
        { className: 'sb-block sb-grid' },
        styles.map(function (style) {
          var className = 'ma-texta-' + slugifyStyle(style);
          return React.createElement(
            Fragment,
            null,
            React.createElement(
              'span',
              { className: className },
              style
            ),
            React.createElement(
              'span',
              { className: 'markdown-body' },
              React.createElement(
                'code',
                null,
                '.' + className
              )
            )
          );
        })
      ),
      React.createElement(SidebarHeading, { title: 'Sizes', level: 2 }),
      React.createElement(
        'div',
        { className: 'sb-block' },
        Object.keys(typographyOptions.size).map(function (key) {
          var Element = typographyOptions.size[key];
          return React.createElement(
            Element,
            null,
            key
          );
        })
      )
    )
  );
}).add('Source Code Pro (Monospace Font)', function () {
  return React.createElement(
    'div',
    { className: 'main-content main-content--two' },
    React.createElement(
      'div',
      { className: 'page-content' },
      React.createElement(Heading, { text: 'Source Code Pro', level: 1 }),
      React.createElement(SidebarHeading, { title: 'Characters', level: 2 }),
      React.createElement(
        'div',
        { className: 'sb-block sb-block--mono' },
        React.createElement(
          'div',
          { className: 'sb-text' },
          letters.toUpperCase()
        ),
        React.createElement(
          'div',
          { className: 'sb-text' },
          letters
        ),
        React.createElement('hr', null),
        React.createElement(
          'div',
          { className: 'sb-text' },
          numbers
        ),
        React.createElement('hr', null),
        React.createElement(
          'div',
          { className: 'sb-text' },
          characters
        ),
        React.createElement('hr', null)
      ),
      React.createElement(
        'div',
        { className: 'sb-block' },
        'Source Code Pro is an open source font available on Google Fonts.',
        React.createElement(DecorativeLink, {
          text: 'Download the fonts or see more information on Google Fonts',
          href: 'https://fonts.google.com/specimen/Source+Code+Pro'
        })
      )
    )
  );
});