import React from 'react'
import ReactDOM from 'react-dom';
import toReactComponent from 'jsonml-to-react-component'
import readme from '../README.md'
import demoList from '../_data/demo-list'

import './demo.scss';

demoList && demoList.length && (
  demoList.sort((a, b) => {
    return a.meta.order - b.meta.order;
  })
);

class Demo extends React.Component {

  render (){
    const { meta } = readme

    return (
      <div className="wrapper">
        <h1>
          {meta.english} {meta.chinese || meta.title}
          {
              !meta.subtitle ? null :
                <span className="subtitle">{ meta.subtitle }</span>
            }
        </h1>
          {
            readme && readme.intro ?
              toReactComponent(['section', { className: 'markdown' }].concat(readme.intro)) : null
          }

          {
            readme && readme.description ?
              toReactComponent(['section', { className: 'markdown' }].concat(readme.description)) : null
          }

          <section className="demo-list markdown">
          {
            demoList && demoList.length ?
              <h3>代码演示</h3> : null
          }
          {
            demoList && demoList.length ? demoList.map(d => {
              return (
                <div className="demo-list-item">
                  <h2>{d.meta.title}</h2>
                  <div className="demo-list-item-stage">
                    { React.cloneElement(d.preview) }
                  </div>
                  <div className="demo-list-item-code">
                    <section>
                      <div className="highlight">
                        <pre>
                          {
                            d.highlightedCode ?
                              <code className="javascript" dangerouslySetInnerHTML={{
                                __html: d.highlightedCode,
                              }} /> : null
                          }
                          {
                              d.highlightedStyle &&
                                  <code className="javascript" dangerouslySetInnerHTML={{
                                      __html: d.highlightedStyle,
                                  }} />
                          }
                        </pre>
                      </div>
                    </section>
                  </div>
                </div>
              )
            }) : null
          }
          </section>

          {
            readme && readme.api ?
              toReactComponent(['section', { className: 'markdown' }].concat(readme.api)) : null
          }
      </div>
    )
  }
}


ReactDOM.render(
  <Demo />,
  document.getElementById('root')
)