import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

import { increase, decrease, async } from './action'

import s from './count.scss'

class Count extends Component {
  constructor(props) {
    super(props)
    this.state = {
      type: 'increase',
    }
  }

  increase(n) {
    const { dispatch } = this.props
    dispatch(increase(n))
    this.setState({
      type: 'increase',
    })
  }

  decrease(n) {
    const { dispatch } = this.props
    dispatch(decrease(n))
    this.setState({
      type: 'DECREASE',
    })
  }

  async(n) {
    const { dispatch } = this.props
    const { type } = this.state
    dispatch(async(n, type))
  }

  render() {
    const { count } = this.props
    return (
      <div>
        <h2 className={s.count}>Some state changes:</h2>
        <div>{count}</div>
        <button
          type="button"
          onClick={() => this.increase(1)}
        >
          Increase
        </button>
        <button
          type="button"
          onClick={() => this.decrease(1)}
        >
          Decrease
        </button>
        <button
          type="button"
          onClick={() => this.async(1)}
        >
          Async
        </button>
      </div>
    )
  }
}

Count.propTypes = {
  dispatch: PropTypes.func.isRequired,
  count: PropTypes.number.isRequired,
}

const mapStateToProps = (state) => {
  const { count } = state
  return { count }
}

export default connect(mapStateToProps)(Count)