import React from 'react'
import ReactDOM from 'react-dom'
import QRious from 'qrious'

import './base.scss'

class SizeRadios extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      selected: props.vals[0]
    }
  }

  render () {
    return <div className='radios'>
    {this.props.vals.map((v) => {
      return <input type='radio' name={this.props.name} value={v}></input>
    })}
    </div>
  }
}

class Qrgen extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      text: 'Hello World!',
      size: 300
    }
  }

  componentDidMount () {
    this.qr = new QRious({
      element: this.refs.qr,
      value: this.state.text,
      size: this.state.size
    })
    this.refs.qrimg.src = this.qr.toDataURL()
  }

  componentDidUpdate (prevProps, prevState) {
    this.qr.value = this.state.text
    this.qr.size = this.state.size
    this.refs.qrimg.src = this.qr.toDataURL()
  }

  render () {
    return <div id='qrgen'>
      <input type='text' value={this.state.text} onChange={(e) => {
        this.setState(Object.assign({}, this.state, { text: e.target.value }))
      }}></input>
      <input type='text' value={this.state.size} onChange={(e) => {
        this.setState(Object.assign({}, this.state, { size: e.target.value }))
      }}></input>
      <SizeRadios name='size' vals={[1,2,3,4]} />
      <p className='save'>To save the QR code, right-click the image and 'Save Image As', or touch and hold the image on your mobile browser.</p>
      <canvas ref='qr' id='qr'></canvas>
      <img ref='qrimg' id='qrimg'></img>
      <footer>
          <p>Created by <a href="https://yuv.al">Yuval Adam</a>. Source available on <a href="https://github.com/yuvadm/qrgen.xyz">Github</a>.</p>
      </footer>
    </div>
  }
}

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