import React, { Component } from 'react'
import CopyToClipboard from 'react-copy-to-clipboard'

class Title extends Component {
  constructor(props, ...args) {
    super(props, ...args)
    props.ob({
      next: type => (type === 'jsx' ? this.onAddJSX.bind(this) : this.setCurrent.bind(this)),
    })

    this.state = {}
    this.stopListeningOnStory = () => this.setState({})
  }

  setCurrent(kind, story) {
    this.setState({ current: { kind, story } })
  }

  onAddJSX(kind, story, jsx) {
    const state = this.state

    if (typeof state[kind] === 'undefined') {
      state[kind] = {}
    }
    state[kind][story] = jsx
    this.setState(state)
  }
  _copy() {
    if (
      typeof this.state.current !== 'undefined' &&
      typeof this.state[this.state.current.kind] !== 'undefined'
    ) {
      Copy.copy(this.state[current.kind][current.story])
    }
  }
  render() {
    if (
      typeof this.state.current !== 'undefined' &&
      typeof this.state[this.state.current.kind] !== 'undefined'
    ) {
      const current = this.state.current
      const code = this.state[current.kind][current.story]

      return (
        <div>
          <span style={styles.title}>JSX</span>
          <CopyToClipboard style={styles.btn} text={code ? code : ''}>
            <button>Copy</button>
          </CopyToClipboard>
        </div>
      )
    } else {
      return (
        <div>
          <span style={styles.title}>JSX</span>
          <CopyToClipboard style={styles.btn} text="" disabled>
            <button>Copy</button>
          </CopyToClipboard>
        </div>
      )
    }
  }
}

export default Title

const styles = {
  title: {
    marginRight: 8,
  },
  btn: {
    flex: 1,
    outline: 'none',
    border: '1px solid #A7A7A7',
    borderRadius: 2,
    color: '#A7A7A7',
    padding: 2,
    margin: 0,
    backgroundColor: 'transparent',
    cursor: 'pointer',
    transition: 'all .3s ease',
  },
}

@@ -9,1920 +9,78 @@
 eact
-, %7B Component %7D from 'react'%0Aimport CopyToClipboard from 'react-copy-to-clipboard'%0A%0Aclass Title extends Component %7B%0A  constructor(props, ...args) %7B%0A    super(props, ...args)%0A    props.ob(%7B%0A      next: type =%3E (type === 'jsx' ? this.onAddJSX.bind(this) : this.setCurrent.bind(this)),%0A    %7D)%0A%0A    this.state = %7B%7D%0A    this.stopListeningOnStory = () =%3E this.setState(%7B%7D)%0A  %7D%0A%0A  setCurrent(kind, story) %7B%0A    this.setState(%7B current: %7B kind, story %7D %7D)%0A  %7D%0A%0A  onAddJSX(kind, story, jsx) %7B%0A    const state = this.state%0A%0A    if (typeof state%5Bkind%5D === 'undefined') %7B%0A      state%5Bkind%5D = %7B%7D%0A    %7D%0A    state%5Bkind%5D%5Bstory%5D = jsx%0A    this.setState(state)%0A  %7D%0A  _copy() %7B%0A    if (%0A      typeof this.state.current !== 'undefined' &&%0A      typeof this.state%5Bthis.state.current.kind%5D !== 'undefined'%0A    ) %7B%0A      Copy.copy(this.state%5Bcurrent.kind%5D%5Bcurrent.story%5D)%0A    %7D%0A  %7D%0A  render() %7B%0A    if (%0A      typeof this.state.current !== 'undefined' &&%0A      typeof this.state%5Bthis.state.current.kind%5D !== 'undefined'%0A    ) %7B%0A      const current = this.state.current%0A      const code = this.state%5Bcurrent.kind%5D%5Bcurrent.story%5D%0A%0A      return (%0A        %3Cdiv%3E%0A          %3Cspan style=%7Bstyles.title%7D%3EJSX%3C/span%3E%0A          %3CCopyToClipboard style=%7Bstyles.btn%7D text=%7Bcode ? code : ''%7D%3E%0A            %3Cbutton%3ECopy%3C/button%3E%0A          %3C/CopyToClipboard%3E%0A        %3C/div%3E%0A      )%0A    %7D else %7B%0A      return (%0A        %3Cdiv%3E%0A          %3Cspan style=%7Bstyles.title%7D%3EJSX%3C/span%3E%0A          %3CCopyToClipboard style=%7Bstyles.btn%7D text=%22%22 disabled%3E%0A            %3Cbutton%3ECopy%3C/button%3E%0A          %3C/CopyToClipboard%3E%0A        %3C/div%3E%0A      )%0A    %7D%0A  %7D%0A%7D%0A%0Aexport default Title%0A%0Aconst styles = %7B%0A  title: %7B%0A    marginRight: 8,%0A  %7D,%0A  btn: %7B%0A    flex: 1,%0A    outline: 'none',%0A    border: '1px solid #A7A7A7',%0A    borderRadius: 2,%0A    color: '#A7A7A7',%0A    padding: 2,%0A    margin: 0,%0A    backgroundColor: 'transparent',%0A    cursor: 'pointer',%0A    transition: 'all .3s ease',%0A  %7D,%0A%7D
+ from 'react'%0A%0Aconst Title = () =%3E %3Cspan%3EJSX%3C/span%3E%0A%0Aexport default Title
 %0A

update component