import { useState, useEffect } from 'react';
import _ from 'lodash';
import { useForm } from 'react-hook-form';
import DateInput from './components/DateInput';

const AddBudgetPeriodForm = ({ requestClose }) => {
  const [tmp, setTmp] = useState(0),
    { handleSubmit, register, formState: { errors }, trigger } = useForm({ mode: 'onChange' }),
    onSubmit = (data) => { console.log(data); requestClose() };

  useEffect(() => {
    trigger();
  });

  return (
    <div className="budget-period-form">
      <h1>Choose Budget Period</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <DateInput label='Start Date' fieldName='startDate' required={true} form={{ register, errors }} />
        <DateInput label='End Date' fieldName='endDate' required={true} form={{ register, errors }} />
        <button type='submit' disabled={!_.isEmpty(errors)}>Create</button>
      </form>
      <button onClick={requestClose}>Cancel</button>
    </div>
  );
}

export default AddBudgetPeriodForm;