import React from 'react'
import { Link } from 'react-router'
import { Container, Grid, Span } from 'react-responsive-grid'
import { prefixLink } from 'gatsby-helpers'
import includes from 'underscore.string/include'
import { colors, activeColors } from 'utils/colors'

import typography from 'utils/typography'
import { config } from 'config'

import { Editor } from 'react-draft-wysiwyg';

// Import styles.
import 'css/main.css'
import 'css/github.css'

const { rhythm, adjustFontSizeTo } = typography

module.exports = React.createClass({
  propTypes () {
    return {
      children: React.PropTypes.object,
    }
  },
  render () {
    return (
      <div>
        <span>A Wysiwyg editor built on top of ReactJS and DraftJS.</span>
        <div>
          <span
            style={{
              fontWeight: '500',
              fontSize: 18,
              marginTop: 20,
            }}
          >
            Features
          </span>
          <ul>
            <li>Toolbar with various options for text editing as detailed below.</li>
            <li>Toolbar can be show always or shown-hidden as editor is focused.</li>
            <li>Feature to group related toolbar options in drop-down.</li>
            <li>Generating HTML markup for content of DraftJS editor.</li>
            <li>Callback can be configured to upload image while adding new image to editor.</li>
          </ul>
        </div>
        <div>
          <span
            style={{
              fontWeight: '500',
              fontSize: 18,
              marginTop: 20,
            }}
          >
            Text Editing Features
          </span>
          <ul>
            <li style={{ margin: '10px 0 2px' }}>
              Support for changing inline styles - Bold, Italic, Underline, Strikeout, Code.
            </li>
            <li style={{ margin: '10px 0 2px' }}>
              Support for changing block styles - Paragraph, Headings H1 - H6, Blockquote.
            </li>
            <li style={{ margin: '10px 0 2px' }}>
              Support for changing for size of font.
            </li>
            <li style={{ margin: '10px 0 2px' }}>
              Support for changing font family.
            </li>
            <li style={{ margin: '10px 0 2px' }}>
              Creating lists - ordered and un-ordered.
            </li>
            <li style={{ margin: '10px 0 2px' }}>
              Changing depth of lists.
            </li>
            <li style={{ margin: '10px 0 2px' }}>
              Changing text and highlight colors.
            </li>
            <li style={{ margin: '10px 0 2px' }}>
              Adding/removing links from text.
            </li>
            <li style={{ margin: '10px 0 2px' }}>
              Undo/Redo changes.
            </li>
            <li style={{ margin: '10px 0 2px' }}>
              Adding image by uploading or giving image URL.
            </li>
            <li style={{ margin: '10px 0 2px' }}>
              Changing alignment of the image.
            </li>
          </ul>
        </div>
      </div>
    )
  },
})
