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

import { history } from 'app/store'
import actions from 'app/actions'
import { MenuButton } from 'app/common'

const mapStateToProps = state => ({
  user: state.user,
  currentUser: state.auth.user,
})

export default class UserMenu extends Component {
  render() {
    return (
      <div className='menuButtons'>
        <Route exact path='/users/:id/show/' component={UserShowMenu} />
        <Route exact path='/users/:id/edit/' component={UserEditMenu} />
        <Route exact path='/users/new/' component={UserNewMenu} />
        <Route exact path='/users/' component={UserIndexMenu} />
      </div>
    )
  }
}

const UserIndexMenu = connect(mapStateToProps)((props) => ([
  props.currentUser.is_admin && <MenuButton key='new' name="new" href="/users/new/" />,
]))

const UserShowMenu = connect(mapStateToProps)((props) => ([
  <MenuButton key='back' name="back" href="/users/" />,
  (props.currentUser.is_admin || parseInt(props.match.params.id) === props.currentUser.id) && (
    <MenuButton key='edit' name="edit" href={"/users/" + props.match.params.id + "/edit/"} />
  ),
  (parseInt(props.match.params.id) !== props.currentUser.id) && (
    <MenuButton key='delete' name="delete" onClick={() => {
      const { res: user } = props.user.show
      if (confirm("Really delete this user?")) {
        actions.user.destroy(user).then(() => {
          history.push('/users/')
        })
      }
    }} />
  ),
]))

const UserNewMenu = (props) => ([
  <MenuButton key='back' name="back" href="/users/" />,
])

const UserEditMenu = connect(mapStateToProps)((props) => ([
  <MenuButton key='back' name="back" href="/users/" />,
  (parseInt(props.match.params.id) !== props.currentUser.id) && (
    <MenuButton key='delete' name="delete" onClick={() => {
      const { res: user } = props.user.show
      if (confirm("Really delete this user?")) {
        actions.user.destroy(user).then(() => {
          history.push('/users/')
        })
      }
    }} />
  ),
]))