import React, { FC } from 'react';

import { DatePicker, Form, Input } from 'antd';
import { useForm } from 'antd/es/form/Form';

import styles from '../../Schedule.module.scss';

import { dateFormat } from '../../consts';
import { PatientSearchData } from '../../types';

interface PatientFormProps {
  onSubmit: (values: Omit<PatientSearchData, 'patientID'>) => void;
}

const PatientFormForOffer: FC<PatientFormProps> = ({ onSubmit }) => {
  const [form] = useForm();

  const handleForm = () => {
    const { name, email, phone, birthDate } = form.getFieldsValue();
    onSubmit({
      name,
      phone,
      email,
      birthDate: birthDate ? birthDate.format(dateFormat) : '',
    });
  };

  return (
    <Form
      className={styles.patientForm}
      form={form}
      initialValues={{
        name: '',
        email: '',
        phone: '',
        birthDate: undefined,
      }}
      onBlur={handleForm}
      onFinish={handleForm}
    >
      <Form.Item label="Повне ім'я" name="name">
        <Input />
      </Form.Item>
      <Form.Item label="E-mail" name="email">
        <Input />
      </Form.Item>
      <Form.Item label="Номер телефону" name="phone">
        <Input />
      </Form.Item>
      <Form.Item label="Дата народження" name="birthDate">
        <DatePicker format={dateFormat} inputReadOnly allowClear={false} />
      </Form.Item>
    </Form>
  );
};

export default PatientFormForOffer;