import React from 'react'
import { Mutation } from 'react-apollo'
import gql from 'graphql-tag'
import jwt from 'jsonwebtoken'
import { withStyles } from 'material-ui'
import Checkbox from 'material-ui/Checkbox'
import FormControlLabel from 'material-ui/Form/FormControlLabel'
import Dialog, { DialogActions, DialogContent, DialogTitle, withMobileDialog } from 'material-ui/Dialog'
import Button from 'material-ui/Button'
import Paper from 'material-ui/Paper'
import TextField from 'material-ui/TextField'
import Grid from 'material-ui/Grid'
import { FormControl } from 'material-ui/Form'
import Select from 'material-ui/Select'
import InputLabel from '@material-ui/core/InputLabel'
import MenuItem from '@material-ui/core/MenuItem'

const styles = theme => ({
  logoWidth: {
    [theme.breakpoints.up('md')]: {
      maxWidth: '60%'
    },
    [theme.breakpoints.down('sm')]: {
      maxWidth: '80%'
    }
  },
  paperLogin: {
    [theme.breakpoints.up('md')]: {
      maxWidth: '30%'
    },
    [theme.breakpoints.down('sm')]: {
      maxWidth: '90%'
    }
  }
})

class Login extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      email: null,
      pass: null,
      open: false,
      error: false
    }
  }

  render () {
    const {classes} = this.props
    return (
      <Mutation
        mutation={gql`mutation localLogin($token: String!, $expiration: String!) { login(token: $token, expiration: $expiration) @client { token }}`}
        ssr={false}
      >
        {login =>
          <div style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            height: '100vh',
            backgroundImage: 'url("/images/sfondo4.jpg")',
            backgroundSize: 'cover'
          }}>
            {/* <Paper style={{maxWidth: '60%', textAlign: 'center', flex: 1, position: 'absolute', top: '10%', padding: 30, justifyContent: 'center', alignItems: 'center'}}> */}
            <Mutation
              mutation={gql`mutation loginRemote($email: String!, $password: String!) { signinUser(email: { email: $email, password: $password }) {
                token
                }
              }`}
              ssr={false}
            >
              {(serverLogin, {data, loading, error}) => {
                if (data) {
                  const expiration = new Date(jwt.decode(data.signinUser.token).exp * 1000).toISOString()
                  login({variables: {token: data.signinUser.token, expiration: expiration}})
                }
                return (
                  <Paper className={classes.paperLogin} style={{textAlign: 'center', flex: 1, padding: 30, justifyContent: 'center', alignItems: 'center'}}>
                    <Grid container spacing={24}>
                      <Grid item xs={12}>
                        <img alt='fruitone logo' src='https://i.imgur.com/sEnQFzJ.png' style={{maxWidth: '60%'}} />
                      </Grid>
                      <Grid item xs={12} style={{paddingBottom: 0}}>
                        <TextField
                          required
                          id='mail'
                          label='Email'
                          margin='normal'
                          onChange={(e) => this.setState({email: e.target.value})}
                          onKeyPress={(ev) => {
                            console.log(ev.key)
                            if (ev.key === 'Enter') {
                              try {
                                serverLogin({variables: {email: this.state.email, password: this.state.pass}})
                              } catch (e) {
                                this.setState({error: true})
                              }
                            }
                          }}
                          style={{width: '100%'}}
                        />
                      </Grid>
                      <Grid item xs={12} style={{paddingTop: 0}}>
                        <TextField
                          required
                          id='pass'
                          label='Password'
                          margin='normal'
                          onChange={(e) => this.setState({pass: e.target.value})}
                          onKeyPress={(ev) => {
                            console.log(ev.key)
                            if (ev.key === 'Enter') {
                              try {
                                serverLogin({variables: {email: this.state.email, password: this.state.pass}})
                              } catch (e) {
                                this.setState({error: true})
                              }
                            }
                          }}
                          style={{width: '100%'}}
                          type='password'
                        />
                      </Grid>
                      {error
                        ? <Grid item xs={12}>
                          <div style={{color: 'red'}}>Utente e password non corrispondono</div>
                        </Grid>
                        : null}
                      <Grid item xs={6} sm={4} md={3} style={{marginTop: 20}}>
                        <Button onClick={() => {
                          try {
                            serverLogin({variables: {email: this.state.email, password: this.state.pass}})
                          } catch (e) {
                            this.setState({error: true})
                          }
                        }} color='primary' variant='raised'>
                          Entra
                        </Button>
                      </Grid>
                      <Grid item xs={6} sm={4} md={3} style={{marginTop: 20}}>
                        <Button onClick={() => this.setState({open: true})} color='secondary' variant='raised'>
                          Registrati
                        </Button>
                      </Grid>
                    </Grid>
                  </Paper>
                )
              }}
            </Mutation>
            <Registrazione
              open={this.state.open}
              onClose={() => this.setState({open: false})}
              fullScreen={this.props.fullScreen} />
          </div>
        }
      </Mutation>
    )
  }
}

export default withMobileDialog()(withStyles(styles)(Login))

class Registrazione extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      ragioneSociale: '',
      nome: '',
      cognome: '',
      email: '',
      telefono: '',
      sede: '',
      indirizzo: '',
      codFiscale: '',
      citta: '',
      cap: '',
      pIva: '',
      password: '',
      cPassword: '',
      coordBancarie: '',
      sameIndirizzo: true,
      open: false,
      tipoCliente: ''
    }
  }
  render () {
    const props = this.props
    const isPwEq = this.state.password === this.state.cPassword
    const isCapInt = Number.isInteger(this.state.cap)
    const disabled =
    this.state.nome === '' ||
    this.state.cognome === '' ||
    this.state.ragioneSociale === '' ||
    this.state.email === '' ||
    this.state.telefono === '' ||
    this.state.sede === '' ||
    this.state.cap === '' ||
    this.state.citta === '' ||
    this.state.password === '' ||
    this.state.cPassword === '' ||
    this.state.indirizzo === '' ||
    this.state.codFiscale === '' ||
    this.state.pIva === '' ||
    this.state.coordBancarie === ''

    return (
      <Dialog
        fullScreen={props.fullScreen}
        open={props.open}
        onClose={() => {
          props.onClose()
          this.setState({udm: {id: null, name: null}, amount: null})
        }}
        aria-labelledby='responsive-dialog-title'
      >
        <DialogTitle id='responsive-dialog-title'>
          <div style={{color: '#eee'}}>
      Registrati
          </div>
        </DialogTitle>
        <div align='center'>
          <DialogContent>
            <FormControl aria-describedby='unit-helper-text'>
              <InputLabel>Tipo di cliente</InputLabel>
              <Select
                value={this.state.tipoCliente}
                onChange={(event) => this.setState({tipoCliente: event.target.value})}
              >
                <MenuItem value='Privato'>Privato</MenuItem>
                <MenuItem value='Business'>Business</MenuItem>
              </Select>
            </FormControl>
            <Grid item xs={12}>
              <TextField
                id='ragioneSociale'
                label='Ragione Sociale'
                defaultValue={this.state.ragioneSociale}
                onChange={(n) => this.setState({ragioneSociale: n.target.value})}
                margin='normal'
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                id='email'
                label='Email'
                defaultValue={this.state.email}
                onChange={(n) => this.setState({email: n.target.value})}
                margin='normal'
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                id='password'
                label='Password'
                type='password'
                defaultValue={this.state.password}
                onChange={(n) => this.setState({password: n.target.value})}
                margin='normal'
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                id='confermaPassword'
                label='Conferma Password'
                type='password'
                defaultValue={this.state.cPassword}
                onChange={(n) => this.setState({cPassword: n.target.value})}
                margin='normal'
              />
            </Grid>
            {isPwEq
              ? null
              : <span style={{color: 'red'}}> Le password non corrispondono! </span> }
            <Grid item xs={12}>
              <TextField
                id='telefono'
                label='Telefono'
                defaultValue={this.state.telefono}
                onChange={(n) => this.setState({telefono: n.target.value})}
                margin='normal'
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                id='indirizzoSede'
                label='Indirizzo sede amministr.'
                defaultValue={this.state.sede}
                onChange={(n) => {
                  if (this.state.sameIndirizzo) {
                    this.setState({sede: n.target.value, indirizzo: n.target.value})
                  } else {
                    this.setState({sede: n.target.value})
                  }
                }}
                margin='normal'
              />
            </Grid>
            <Grid item xs={12}>
              <FormControlLabel
                style={{marginRight: 0, marginTop: 10}}
                control={
                  <Checkbox
                    checked={this.state.sameIndirizzo}
                    onClick={() => this.setState({sameIndirizzo: !this.state.sameIndirizzo})}
                    color='secondary' />
                } label='Indirizzo di consegna coincide con la sede' />
            </Grid>
            {this.state.sameIndirizzo
              ? null
              : <Grid item xs={12}>
                <TextField
                  id='indirizzo'
                  label='Indirizzo di consegna'
                  defaultValue={this.state.indirizzo}
                  onChange={(n) => this.setState({indirizzo: n.target.value})}
                  margin='normal'
                />
              </Grid>}
            <Grid item xs={12}>
              <TextField
                id='citta'
                label='Città'
                defaultValue={this.state.citta}
                onChange={(n) => this.setState({citta: n.target.value})}
                margin='normal'
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                id='cap'
                label='CAP'
                defaultValue={this.state.cap}
                onChange={(n) => this.setState({cap: parseInt(n.target.value)})}
                margin='normal'
              />
            </Grid>
            {isCapInt
              ? null
              : this.state.cap !== ''
                ? <span style={{color: 'red'}}>Il CAP deve essere un numero</span>
                : null
            }
            <Grid item xs={12}>
              <TextField
                id='codFiscale'
                label='Codice Fiscale'
                defaultValue={this.state.codFiscale}
                onChange={(n) => this.setState({codFiscale: n.target.value})}
                margin='normal'
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                id='pIva'
                label='Partita Iva'
                defaultValue={this.state.pIva}
                onChange={(n) => this.setState({pIva: n.target.value})}
                margin='normal'
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                id='coordBancarie'
                label='Coordinate bancarie'
                defaultValue={this.state.coordBancarie}
                onChange={(n) => this.setState({coordBancarie: n.target.value})}
                margin='normal'
              />
            </Grid>
          </DialogContent>
        </div>
        <DialogActions>
          <Button onClick={() => {
            props.onClose()
          }} color='primary'>
        Indietro
          </Button>
          <Mutation
            mutation={gql`mutation createUser(
          $nome: String,
          $cognome: String,
          $ragioneSociale: String,
          $indirizzo: String,
          $sede: String!,
          $pIva: String,
          $codFiscale: String,
          $cap: Int,
          $citta: String,
          $telefono: String,
          $coordBancarie: String!
          $email: String!,
          $password: String!,
        ) { createUser(
        nome: $nome,
        cognome: $cognome,
        ragioneSociale: $ragioneSociale
        indirizzo: $indirizzo
        sede: $sede
        pIva: $pIva
        codFiscale: $codFiscale
        cap: $cap
        citta: $citta
        telefono: $telefono
        coordBancarie: $coordBancarie
        authProvider: {email:{email:$email, password:$password}}
      ) { id } }`}
            ssr={false}>
            {createUser =>
              <Button
                onClick={() => {
                  createUser({variables: {
                    nome: this.state.nome,
                    cognome: this.state.cognome,
                    ragioneSociale: this.state.ragioneSociale,
                    indirizzo: this.state.indirizzo,
                    sede: this.state.sede,
                    pIva: this.state.pIva,
                    codFiscale: this.state.codFiscale,
                    cap: parseInt(this.state.cap),
                    citta: this.state.citta,
                    telefono: this.state.telefono,
                    coordBancarie: this.state.coordBancarie,
                    email: this.state.email,
                    password: this.state.password
                  }})
                  props.onClose()
                }}
                color='primary'
                variant='raised'
                style={{marginTop: 15}}
                disabled={!isPwEq || disabled || !isCapInt
                }
              >
          Conferma
              </Button>
            }
          </Mutation>
        </DialogActions>
      </Dialog>
    )
  }
}