import React, { Component } from 'react';

// eslint-disable-next-line import/no-unresolved
import simpleExampleCode from '!!../../../loaders/prism-loader?language=javascript!./SimpleFocusEditor';
// eslint-disable-next-line import/no-unresolved
import simpleExampleEditorStylesCode from '!!../../../loaders/prism-loader?language=css!./SimpleFocusEditor/editorStyles.css';
// eslint-disable-next-line import/no-unresolved
import simpleExampleColorBlockCode from '!!../../../loaders/prism-loader?language=javascript!./SimpleFocusEditor/colorBlockPlugin';
// eslint-disable-next-line import/no-unresolved
import webpackConfig from '!!../../../loaders/prism-loader?language=javascript!./webpackConfig';
// eslint-disable-next-line import/no-unresolved
import webpackImport from '!!../../../loaders/prism-loader?language=javascript!./webpackImport';

import Container from '../../shared/Container';
import AlternateContainer from '../../shared/AlternateContainer';
import Heading from '../../shared/Heading';
import styles from './styles.css';
import Code from '../../shared/Code';
import SimpleFocusEditor from './SimpleFocusEditor';
import ExternalLink from '../../shared/Link';
import InlineCode from '../../shared/InlineCode';
import SocialBar from '../../shared/SocialBar';
import NavBar from '../../shared/NavBar';
import Separator from '../../shared/Separator';

export default class App extends Component {
  render() {
    return (
      <div>
        <NavBar />
        <Separator />
        <Container>
          <Heading level={2}>Focus</Heading>
          <Heading level={3}>Prerequisite</Heading>
          <p>
            This plugin exposes a decorator for blocks of the type `atomic`. You can use it in combination with any kind of plugin that manages a Draft.js block e.g. image or video. Keep in mind the plugin must accept a decorator for the block. The `Simple Focus Example` further down contains an example plugin rendering a colored div.
          </p>
          <Heading level={3}>Usage</Heading>
          <p>
            Select (via mouse or keyboard) a block.
          </p>
          <Heading level={3}>Supported Environment</Heading>
          <ul className={styles.list}>
            <li className={styles.listEntry}>
              Desktop: Yes
            </li>
            <li className={styles.listEntry}>
              Mobile: Yes
            </li>
            <li className={styles.listEntry}>
              Screen-reader: No
            </li>
          </ul>
        </Container>
        <AlternateContainer>
          <Heading level={2}>Getting Started</Heading>
          <Code code="npm install draft-js-plugins-editor" />
          <Code code="npm install draft-js-focus-plugin" />
          <Heading level={3}>Importing the default styles</Heading>
          <p>
            The plugin ships with a default styling available at this location in the installed package:
            &nbsp;
            <InlineCode code={'node_modules/draft-js-focus-plugin/lib/plugin.css'} />
          </p>
          <Heading level={4}>Webpack Usage</Heading>
          <ul className={styles.list}>
            <li className={styles.listEntry}>
              1. Install Webpack loaders:
              &nbsp;
              <InlineCode code={'npm i style-loader css-loader --save-dev'} />
            </li>
            <li className={styles.listEntry}>
              2. Add the below section to Webpack config (if your config already has a loaders array, simply add the below loader object to your existing list.
              <Code code={webpackConfig} className={styles.guideCodeBlock} />
            </li>
            <li className={styles.listEntry}>
              3. Add the below import line to your component to tell Webpack to inject the style to your component.
              <Code code={webpackImport} className={styles.guideCodeBlock} />
            </li>
            <li className={styles.listEntry}>
              4. Restart Webpack.
            </li>
          </ul>
          <Heading level={4}>Browserify Usage</Heading>
          <p>
            Please help, by submiting a Pull Request to the <ExternalLink href="https://github.com/draft-js-plugins/draft-js-plugins/blob/master/docs/client/components/pages/Image/index.js">documentation</ExternalLink>.
          </p>
        </AlternateContainer>
        <Container>
          <Heading level={2}>Configuration Parameters</Heading>
        </Container>
        <Container>
          <Heading level={2}>Simple Focus Example</Heading>
          <SimpleFocusEditor />
          <Code code={simpleExampleCode} name="SimpleFocusEditor.js" />
          <Code code={simpleExampleColorBlockCode} name="colorBlockPlugin.js" />
          <Code code={simpleExampleEditorStylesCode} name="editorStyles.css" />
        </Container>
        <SocialBar />
      </div>
    );
  }
}

@@ -4402,32 +4402,666 @@
 eters%3C/Heading%3E%0A
+          %3Cdiv className=%7Bstyles.param%7D%3E%0A            %3Cspan className=%7Bstyles.paramName%7D%3Etheme%3C/span%3E%0A            %3Cspan%3EObject of CSS classes with the following keys:%3C/span%3E%0A            %3Cdiv className=%7Bstyles.subParams%7D%3E%0A              %3Cdiv className=%7Bstyles.subParam%7D%3E%0A                %3Cspan className=%7Bstyles.subParamName%7D%3Efocused:%3C/span%3E%0A                CSS class for the focused item.%0A              %3C/div%3E%0A              %3Cdiv className=%7Bstyles.subParam%7D%3E%0A                %3Cspan className=%7Bstyles.subParamName%7D%3Eunfocused:%3C/span%3E%0A                CSS class for the unfocused item.%0A              %3C/div%3E%0A            %3C/div%3E%0A          %3C/div%3E%0A
         %3C/Contai

add section for Configuration Parameters