import { Button, Form, Input } from 'antd'
import FormItem from 'antd/lib/form/FormItem'
import { Link } from 'react-router-dom'
import { User } from '../../types'

import '../../scss/login.scss'
import { useUserContext } from '../../contexts/UserContext'

type FormValues = Pick<User, 'name'> & { password: string }

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

  const [form] = Form.useForm<FormValues>()

  const handleFinish = ({ name, password }: FormValues) => {
    userContext.handleLogin(name, password)
  }

  return (
    <div className="login">
      <h1>Log In</h1>
      <Form onFinish={handleFinish} form={form}>
        <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>
    </div>
  )
}