'use strict'

import React from 'react'
import {ApBuilder, ApBuilderStyle} from 'apeman-react-builder'
import {ApTabStyle} from 'apeman-react-tab'
import {ApFrameStyle} from 'apeman-react-frame'

const color = '#38E'
const ExampleComponent = React.createClass({
  getInitialState () {
    return {
      html: `
<html><body><!-- ** --></body></html>
`,
      script: `
console.log('hoge', window.foo)
/* ... */
`,
      globals: {
        foo: 'This is foo!!'
      }
    }
  },

  render () {
    const s = this
    let { state } = s
    return (
      <div>
        <ApBuilderStyle highlightColor={ color }/>
        <ApTabStyle highlightColor={ color }/>
        <ApButtonStyle highlightColor={ color }/>
        <ApFrameStyle highlightColor={ color }/>
        <ApBuilderStyle highlightColor={ color }/>
        <ApBuilder html={ state.html }
                   script={ state.script }
                   compile={ (script) => { /* ... */ return script } }
                   globals={ state.globals }/>
      </div>
    )
  }
})

