import React from 'react'
import Checkmark from './svg/Checkmark'

export default class extends React.Component {
  constructor(props) {
    super()
    this.state = { isEnabled: props.enabled || false }
    this.toggle = this.toggle.bind(this)
  }

  toggle() {
    this.setState({ isEnabled: !this.state.isEnabled }, () => {
      this.props.onChange(this.state.isEnabled)
    })
  }

  render() {
    return (
      <div className="toggle" onClick={this.toggle}>
        <span className="label">{this.props.label}</span>
        { this.state.isEnabled ? <Checkmark /> : null }
        <style jsx>{`
          .toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            user-select: none;
            padding: 8px;
          }
        `}</style>
      </div>
    )
  }
}