import React, { useState } from 'react'
import Bottom from '../bottom/bottom'
import TopBarContainer from '../../containers/topbar'
import TeamCard from '../Cards/TeamCard'
import { Grid } from '@material-ui/core'
import { Page } from 'app/styleguide/components/Page'
import { Section } from '../welcome/components/CommonStyles'
import TextField from '@material-ui/core/TextField'
import Button from '@material-ui/core/Button'
import { makeStyles } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'

function checkEmail (emailAddress) {
  let sQtext = '[^\\x0d\\x22\\x5c\\x80-\\xff]'
  let sDtext = '[^\\x0d\\x5b-\\x5d\\x80-\\xff]'
  let sAtom = '[^\\x00-\\x20\\x22\\x28\\x29\\x2c\\x2e\\x3a-\\x3c\\x3e\\x40\\x5b-\\x5d\\x7f-\\xff]+'
  let sQuotedPair = '\\x5c[\\x00-\\x7f]'
  let sDomainLiteral = '\\x5b(' + sDtext + '|' + sQuotedPair + ')*\\x5d'
  let sQuotedString = '\\x22(' + sQtext + '|' + sQuotedPair + ')*\\x22'
  let sDomainRef = sAtom
  let sSubDomain = '(' + sDomainRef + '|' + sDomainLiteral + ')'
  let sWord = '(' + sAtom + '|' + sQuotedString + ')'
  let sDomain = sSubDomain + '(\\x2e' + sSubDomain + ')*'
  let sLocalPart = sWord + '(\\x2e' + sWord + ')*'
  let sAddrSpec = sLocalPart + '\\x40' + sDomain // complete RFC822 email address spec
  let sValidEmail = '^' + sAddrSpec + '$' // as whole string

  let reValidEmail = new RegExp(sValidEmail)

  return reValidEmail.test(emailAddress)
}

const useStyles = makeStyles((theme) => ({
  coreTeamForm: {
    marginTop: theme.spacing(1),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-end',
    color: 'white'
  },
  underline: {
    '&:before': {
      borderBottomColor: '#009688',
    },
    color: 'white',
    marginBottom: 10
  }
}))

const recruiterTeam = [
  {
    name: 'Alexandre Magno',
    description: 'Founder of Gitpay, and senior software engineer for 15+ years, Alexandre is an active open source maintainer, author of Mobile First Boostrap and he help the development community with your blog alexandremagno.net.',
    image: require('../../images/teams/headhunter-team-member1.png'),
    linkedinUrl: 'https://www.linkedin.com/in/alexandremagnoteleszimerer/',
    githubUrl: 'https://github.com/alexanmtz'
  },
  {
    name: 'Wharley Ornelas',
    description: 'Fullstack developer, with 15+ development experience. First developer to contribute and he helped with the core, and an brazilian developer evangelist',
    image: require('../../images/teams/wharley-team-member.jpg'),
    linkedinUrl: 'https://in.linkedin.com/in/wharley-ornelas-da-rocha-65420932',
    githubUrl: 'http://github.com/wharley'
  }
]

export default function Team (props) {
  const [formData, setFormData] = useState({})
  const [formErrors, setFormErrors] = useState({})
  const classes = useStyles()

  const onChange = (event) => {
    const name = event.nativeEvent.target.name
    const value = event.target.value
    setFormData({ ...formData, [name]: value })
  }

  const onSubmit = (event) => {
    event.preventDefault()
    if (Object.keys(formErrors).length === 0) {
      props.joinTeamAPICall(formData.email)
    }
  }

  const onBlur = (event) => {
    !checkEmail(formData.email) ? setFormErrors({ ...formErrors, email: true }) : setFormErrors({})
  }

  return (
    <Page>
      <TopBarContainer />
      <Section>
        <Grid container spacing={ 3 }>
          <Grid item xs={ 12 } justify='center'>
            <TeamCard data={ recruiterTeam } />
          </Grid>
        </Grid>
      </Section>
      <Section>
        <Grid container spacing={ 3 } style={ { backgroundColor: 'black' } } justify={ 'center' } alignItems={ 'center' } >
          <Grid item lg={ 4 } md={ 4 } sm={ 6 } sx={ 12 }>
            <img src={ require('../../images/core-team-page-asset.png') } alt='assets' />
          </Grid>
          <Grid item lg={ 4 } md={ 5 } sm={ 6 } sx={ 12 } >
            <form onChange={ onChange } onSubmit={ onSubmit } onBlur={ onBlur }>
              <Grid container className={ classes.coreTeamForm }>
                <Grid item xs={ 12 } >
                  <Typography gutterBottom >
                    Join the team!
                  </Typography>
                </Grid>
                <Grid item xs={ 12 } style={ { color: 'silver' } } >
                  <Typography gutterBottom >
                    Work with the best and be part of the core
                  </Typography>
                </Grid>
                <Grid item xs={ 12 }>
                  <TextField
                    required
                    value={ formData.email }
                    error={ formErrors.email }
                    id='email'
                    fullWidth
                    label='Email Address'
                    name='email'
                    color='primary'
                    autoComplete='email'
                    InputProps={ { classes: { underline: classes.underline } } }
                  />
                </Grid>
                <Grid item xs={ 12 }>
                  <Button color='primary' fullWidth='true' variant='contained' type='submit'>
                    <Typography gutterBottom >
                      JOIN NOW!
                    </Typography>
                  </Button>
                </Grid>
              </Grid>
            </form>
          </Grid>
        </Grid>
      </Section>
      <Bottom />
    </Page>
  )
}

@@ -2644,16 +2644,446 @@
 harley'%0A
+  %7D,%0A  %7B%0A    name: 'Mayna Thais',%0A    description: 'Project leader with 9+ years of experience. She has worked with software projects and IT infrastructure for many companies. Graduated in Information Systems, MBA in Project Management and Scrum Master certified.',%0A    image: require('../../images/teams/core-team-mayna.png'),%0A    linkedinUrl: 'https://br.linkedin.com/in/mayna-thais',%0A    githubUrl: 'https://github.com/mthais'%0A
   %7D%0A%5D%0A%0Ae

Insert member team (#733)