import React from 'react'
import { Button, Divider, Form, Input, message, Row, Typography } from 'antd'
import FormItem from 'antd/lib/form/FormItem'
import { Content } from 'antd/lib/layout/layout'
import { useState } from 'react'
import { useHistory } from 'react-router-dom'
import { createClient } from '../api'

type FormData = {
  name: string
  email: string
  phone: string
}

export const Dashboard = () => {
  const history = useHistory()
  const [error, setError] = useState<string | null>(null)
  const [form] = Form.useForm<FormData>()

  const handleReset = () => {
    form.resetFields()
  }

  const handleSubmit = async (values: FormData) => {
    if (values.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: values.name,
      email: values.email,
      phone: parseInt(values.phone.replace(/\D/g, '')),
    })

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

  return (
    <Content>
      <Typography.Title className="page-head" level={3}>
        Dashboard
      </Typography.Title>
      <Divider />
      <Form
        form={form}
        className="dashboard-form"
        onFinish={handleSubmit}
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
      >
        <Typography.Paragraph style={{ textAlign: 'center' }}>
          Enter the name, email and phone number of the subject
        </Typography.Paragraph>
        <FormItem label="name" name="name">
          <Input minLength={3} />
        </FormItem>
        <FormItem label="email" name="email">
          <Input type="email" />
        </FormItem>
        <FormItem label="phone" name="phone">
          <Input type="tel" minLength={10} />
        </FormItem>
        <Row justify="space-between">
          <Button danger onClick={handleReset}>
            Reset
          </Button>
          <Button htmlType="submit" type="primary">
            Start Session
          </Button>
        </Row>
        {error && <p className="error">{error}</p>}
      </Form>
    </Content>
  )
}