import React from 'react'
import { useState } from 'react'
import { useHistory } from 'react-router-dom'
import { createClient } from '../api'

export const Dashboard = () => {
  const history = useHistory()
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [phone, setPhone] = useState('')

  const handleReset = () => {
    //
  }

  const handleSubmit = async () => {
    // phone number is stripped for numbers

    await createClient({ name, email, phone })
    history.push(`/sessions/${phone}`)
  }

  return (
    <div>
      <h1>Dashboard</h1>
      <form onSubmit={handleSubmit}>
        <label htmlFor="name">
          Name:
          <input type="text" name="name" />
        </label>
        <label htmlFor="email">
          Email:
          <input type="email" name="email" />
        </label>
        <label htmlFor="phone">
          Phone:
          <input type="phone" name="phone" />
        </label>
        <button type="submit">Start Session</button>
        <button onClick={handleReset}>Reset</button>
      </form>
      <div>TODO: List of past sessions for review?</div>
    </div>
  )
}