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

import Head from '../head'
import Menu from '../menu'
import Count from '../count'
import s from './style.scss'

class Auth extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    const { match } = this.props
    return (
      <div className={s.wrap}>
        <Menu />
        <div className={s.box}>
          <Head />
          <div className={s.layout}>
            <Route exact path={`${match.url}`} component={Count} />
            <Route path={`${match.url}/count`} component={Count} />
          </div>
        </div>
      </div>
    )
  }
}

Auth.propTypes = {
  match: PropTypes.shape({ push: PropTypes.object.isRequired }).isRequired,
}

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

export default connect(mapStateToProps)(Auth)
