import { NewUser, UserProfile } from '@rondo.dev/common'
import React from 'react'
import { FaEnvelope, FaLock, FaUser } from 'react-icons/fa'
import { Link } from 'react-router-dom'
import { Input } from '../components/Input'
import { Redirect } from '../components/Redirect'
import { Button } from '../components'
import { Captcha } from '@rondo.dev/react-captcha'

export interface RegisterFormProps {
  baseUrl: string
  error?: string
  onSubmit: () => void
  onChange: (name: string, value: string) => void
  data: NewUser & { captcha: string }
  user?: UserProfile
  redirectTo: string
}

export class RegisterForm extends React.PureComponent<RegisterFormProps> {
  render() {
    if (this.props.user) {
      return <Redirect to={this.props.redirectTo} />
    }
    return (
      <form
        autoComplete='off'
        className='register-form'
        onSubmit={this.props.onSubmit}
      >
        <p className='error has-text-danger'>{this.props.error}</p>
        <Input
          Icon={FaUser}
          label='Username'
          name='username'
          type='text'
          onChange={this.props.onChange}
          value={this.props.data.username}
          placeholder='Username'
          required
        />
        <Input
          Icon={FaLock}
          label='Password'
          name='password'
          type='password'
          onChange={this.props.onChange}
          value={this.props.data.password}
          placeholder='Password'
          required
        />
        <Input
          Icon={FaEnvelope}
          label='Email'
          name='email'
          type='email'
          onChange={this.props.onChange}
          value={this.props.data.username}
          placeholder='Email'
        />
        <Input
          Icon={FaUser}
          label='First Name'
          name='firstName'
          type='text'
          onChange={this.props.onChange}
          value={this.props.data.firstName}
          placeholder='First name'
        />
        <Input
          Icon={FaUser}
          label='Last Name'
          name='lastName'
          type='text'
          onChange={this.props.onChange}
          value={this.props.data.lastName}
          placeholder='Last name'
        />
        <Captcha 
          imageUrl={this.props.baseUrl + '/api/auth/captcha.svg'}
          audioUrl={this.props.baseUrl + '/api/auth/captcha.wav'}
        />
        <Input
          Icon={undefined}
          label='Captcha'
          name='captcha'
          type='text'
          onChange={this.props.onChange}
          value={this.props.data.captcha}
          placeholder='Captcha'
        />
        <div className='text-center'>
          <Button name='submit' type='submit'>
            Register
          </Button>
        </div>
        <p className='small center mt-1'>
          Already have an account? <Link to='/auth/login'>Log in!</Link>
        </p>
      </form>
    )
  }
}