import React, { PureComponent } from 'react'
import { connect } from 'react-redux'

import ExpansionPanel, {
  ExpansionPanelDetails,
  ExpansionPanelSummary,
  ExpansionPanelActions
} from 'material-ui/ExpansionPanel'
import ExpandMoreIcon from 'material-ui-icons/ExpandMore'
import Typography from 'material-ui/Typography'
import Button from 'material-ui/Button'
import Snackbar from 'material-ui/Snackbar'
import Divider from 'material-ui/Divider'
import ListSubheader from 'material-ui/List/ListSubheader'
import TextField from 'material-ui/TextField'

import onSubmit from './onSubmit'

export default connect(mapStateToProps)(class extends PureComponent {
  constructor () {
    super()
    this.state = {
      name: '',
      expanded: false,
      snackbarOpen: false
    }
  }

  render () {
    const {
      expanded,
      name,
      snackbarOpen
    } = this.state

    const {
      dispatch,
      tournament
    } = this.props

    const onOpenSnackbar = (e) => this.setState({
      snackbarOpen: e,
      expanded: false
    })

    return (
      <ExpansionPanel
        expanded={expanded}
        onChange={() => this.setState({ expanded: !expanded, name: '' })}
      >
        <ExpansionPanelSummary
          expandIcon={<ExpandMoreIcon />}
        >
          <Typography>
            {'Add institution'}
          </Typography>
        </ExpansionPanelSummary>
        {expanded && <div>
          <ExpansionPanelDetails
            className={'flex flex-column'}
          >
            <div
              className={'flex flex-row'}
            >
              <div
                className={'w-25'}
              >
                <ListSubheader
                  disableSticky
                >
                  {'Institution information'}
                </ListSubheader>
              </div>
              <div
                className={'w-75'}
              >
                <TextField
                  label={'Name'}
                  fullWidth
                  value={name}
                  onChange={(e) => this.setState({ name: e.target.value })}
                  margin={'normal'}
                />
              </div>
            </div>
          </ExpansionPanelDetails>
          <Divider />
          <ExpansionPanelActions
            className={'flex flex-row justify-end'}
          >
            <Button
              children={'SUBMIT'}
              color={'primary'}
              disabled={
                name === ''
              }
              onClick={() => onSubmit(
                dispatch,
                tournament,
                name,
                onOpenSnackbar
              )}
            />
          </ExpansionPanelActions>
        </div>}
        <Snackbar
          anchorOrigin={{
            vertical: 'top',
            horizontal: 'right'
          }}
          open={Boolean(snackbarOpen)}
          autoHideDuration={6000}
          onClose={() => this.setState({ snackbarOpen: false })}
          SnackbarContentProps={{
            'aria-describedby': 'message-id'
          }}
          message={<span id={'message-id'}>{snackbarOpen}</span>}
        />
      </ExpansionPanel>
    )
  }
})

function mapStateToProps (state, ownProps) {
  return {
    tournament: state.tournaments.current.data
  }
}
