import React from 'react'
import classNames from 'classnames'
import copy from 'copy-to-clipboard'

export default class Demo extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      codeExpand: false,
      copied: false
    }
  }

  handleCodeExapnd = () => {
    this.setState({ codeExpand: !this.state.codeExpand })
  }
  handleCodeCopied = () => {
    copy(this.props.sourceCode)
    this.setState({ copied: true })
  }

  render () {
    const state = this.state
    const props = this.props
    const codeBoxClass = classNames({
      'code-box': true,
      expand: state.codeExpand
    })
    const highlightClass = classNames({
      'highlight-wrapper': true,
      'highlight-wrapper-expand': state.codeExpand
    })
    return (
      <section className={codeBoxClass}>
        {props.children ? <section className='code-box-demo'>{props.children}</section> : null}
        <section className='code-box-meta markdown' onClick={this.handleCodeExapnd}>
          {`${props.lang}源码`}
          <span className='collapse' unselectable='none'>V</span>
        </section>
        <section className={highlightClass} key='code'>
          <div className='highlight'>
            <i className='code-box-code-copy' onClick={this.handleCodeCopied}>
              复制
            </i>
            {props.textNode}
          </div>
        </section>
      </section>
    )
  }
}