import { Input } from 'antd'
import FormItem from 'antd/lib/form/FormItem'
import { Link } from 'react-router-dom'
import { Form } from '../../elements/Form'
import { Button } from '../../elements/Button'
import { useForm } from 'antd/lib/form/Form'
import { useUserContext } from '../../contexts/UserContext'

type FormValues = { username: string; password: string }

export const Login = () => {
  const userContext = useUserContext()

  const [form] = useForm<FormValues>()

  const handleFinish = async ({ username, password }: FormValues) => {
    try {
      const res = await userContext.handleLogin(username, password)
      console.log('logging in', res)
    } catch (err) {
      console.log('error logging in')
    }
  }

  return (
    <Form onFinish={handleFinish} form={form}>
      <h1>Log In</h1>
      <FormItem label="username" name="username">
        <Input />
      </FormItem>
      <FormItem label="Password" name="password">
        <Input type="password" />
      </FormItem>

      <div className="form-footer">
        <Link to="/sign-up">No Account? Sign Up!</Link>
        <Button type="primary" htmlType="submit">
          Log In!
        </Button>
      </div>
    </Form>
  )
}