import { Button, Divider, message, PageHeader } from 'antd'
import { Content } from 'antd/lib/layout/layout'
import React, { FormEvent } from 'react'
import { useState } from 'react'
import { useHistory } from 'react-router-dom'
import { createClient } from '../api'

export const Dashboard = () => {
  const history = useHistory()
  const [error, setError] = useState<string | null>(null)
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [phone, setPhone] = useState('')

  const handleReset = () => {
    //
    setName('')
    setEmail('')
    setPhone('')
  }

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault()

    if (phone.length < 10) {
      // helpful message
      message.error('Check all fields!')
      setError('Phone number needs to be a length of at least 10')
      return
    }

    const client_id = await createClient({
      name,
      email,
      phone: parseInt(phone),
    })

    history.push(`/sessions/${client_id}`)
  }

  return (
    <Content>
      <PageHeader
        title="Dashboard"
        subTitle="Enter the name, email and phone number of the subject"
      ></PageHeader>
      <Divider />
      <form onSubmit={handleSubmit}>
        <label htmlFor="name">
          Name:
          <input
            minLength={3}
            value={name}
            onChange={(e) => setName(e.target.value)}
            name="name"
          />
        </label>
        <label htmlFor="email">
          Email:
          <input
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            type="email"
            name="email"
          />
        </label>
        <label htmlFor="phone">
          Phone:
          <input
            value={phone}
            onChange={(e) => setPhone(e.target.value)}
            type="tel"
            name="phone"
          />
        </label>
        <Button danger onClick={handleReset}>
          Reset
        </Button>
        <Button htmlType="submit" type="primary">
          Start Session
        </Button>
        {error && <p className="error">{error}</p>}
      </form>
    </Content>
  )
}