import { Input, message } from 'antd'
import { useForm } from 'antd/lib/form/Form'
import FormItem from 'antd/lib/form/FormItem'
import axios from 'axios'
import { useAppContext } from '../../contexts/AppContext'
import { Button } from '../../elements/Button'
import { Form } from '../../elements/Form'

type NewUserForm = {
  username: string
  email: string
  password1: string
  password2: string
}

export const NewUser = () => {
  const { baseURL } = useAppContext()
  const [form] = useForm<NewUserForm>()

  const handleFinish = (user: NewUserForm) => {
    if (user.password1 !== user.password2) {
      message.error('passwords do not match')
      return
    }

    axios.post(`${baseURL}/dj-rest-auth/registration/`, user)
  }

  return (
    <Form form={form} onFinish={handleFinish}>
      <FormItem label="username" name="username">
        <Input></Input>
      </FormItem>
      {/* <FormItem label="email" name="email">
        <Input type="email"></Input>
      </FormItem> */}
      <FormItem label="password" name="password1">
        <Input minLength={6}></Input>
      </FormItem>
      <FormItem label="confirm" name="password2">
        <Input></Input>
      </FormItem>
      <Button type="primary" htmlType="submit">
        Create
      </Button>
    </Form>
  )
}