import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';

import TableofContents from '../../..';
import TableofContentsDocs from './TableofContents.md';
import { ColoredHeading, SidebarHeading, DecorativeLink, AccordionItem, Link } from '../../../index';

var getDecorativeLink = function getDecorativeLink(index) {
  var props = {
    info: text('TableofContents Child' + index + ': DecorativeLink info', 'Title info here', 'DecorativeLink' + index),
    text: text('TableofContents Child' + index + ': DecorativeLink text', 'Lorem ipsum dolor sit amet', 'DecorativeLink' + index),
    href: text('TableofContents Child' + index + ': DecorativeLink href', 'index.pdf', 'DecorativeLink' + index),
    showFileIcon: boolean('TableofContents Child' + index + ': DecorativeLink showFileIcon', true, 'DecorativeLink' + index)
  };
  return React.createElement(DecorativeLink, props);
};

var getAccordionItem = function getAccordionItem(index) {
  var props = {
    title: 'Collapsible Header Two',
    info: 'Collapsible Header Two',
    icon: null,
    border: boolean('TableofContents Child' + index + ': AccordionItem border', false, 'AccordionItem' + index),
    secondary: boolean('TableofContents Child' + index + ': AccordionItem secondary', false, 'AccordionItem' + index),
    emphasize: boolean('TableofContents Child' + index + ': AccordionItem emphasize', true, 'AccordionItem' + index),
    // eslint-disable-next-line radix
    headerLevel: parseInt(select('TableofContents Child' + index + ': AccordionItem headerLevel', {
      1: '1',
      2: '2',
      3: '3',
      4: '4',
      5: '5',
      6: '6'
    }, '2', 'AccordionItem' + index))
  };
  return React.createElement(
    AccordionItem,
    props,
    getLink()
  );
};

var getLink = function getLink() {
  var sampleText = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'Sample Link';

  var linkProps = {
    sampleText: sampleText,
    href: 'http://www.mass.gov/'
  };
  return React.createElement(Link, linkProps);
};

var getColoredHeading = function getColoredHeading() {
  var props = {
    text: text('TableofContents ColoredHeading: text', 'Table of Contents', 'ColoredHeading'),
    // eslint-disable-next-line radix
    level: parseInt(select('TableofContents ColoredHeading: level', {
      1: '1',
      2: '2',
      3: '3',
      4: '4',
      5: '5',
      6: '6'
    }, '2', 'ColoredHeading')),
    color: select('TableofContents ColoredHeading: color', {
      '': 'Grey (default)',
      green: 'Green',
      blue: 'Blue'
    }, 'green', 'ColoredHeading')
  };
  return React.createElement(ColoredHeading, props);
};

var getSidebarHeading = function getSidebarHeading() {
  var levelOptions = {
    1: '1',
    2: '2',
    3: '3',
    4: '4',
    5: '5',
    6: '6'
  };
  var props = {
    title: text('TableofContents SidebarHeading: title', 'Key Agencies', 'SidebarHeading'),
    // eslint-disable-next-line radix
    level: parseInt(select('TableofContents SidebarHeading: level', levelOptions, '2', 'SidebarHeading'))
  };
  return React.createElement(SidebarHeading, props);
};

storiesOf('organisms/TableofContents', module).addDecorator(withInfo).addDecorator(withKnobs({ escapeHTML: false })).add('TableofContents with ColoredHeading', function () {
  var props = {
    heading: getColoredHeading()
  };
  return React.createElement(
    TableofContents,
    props,
    getDecorativeLink(0),
    getAccordionItem('phone', 1),
    getAccordionItem('phone', 2),
    getDecorativeLink(3)
  );
}, { info: TableofContentsDocs }).add('TableofContents with SidebarHeading', function () {
  var props = {
    heading: getSidebarHeading()
  };
  return React.createElement(
    TableofContents,
    props,
    getDecorativeLink(0),
    getAccordionItem('phone', 1),
    getAccordionItem('phone', 2),
    getDecorativeLink(3)
  );
}, { info: TableofContentsDocs });