import { FC } from 'react';
import { useForm } from 'react-hook-form';
import { Approval, ApprovalStatus } from '../../types/approval';

type ApprovalFormProps = {
  approval?: Approval;
  handleSubmit: (data: FormInputs) => void;
};

type FormInputs = {
  title: string;
  department: string;
  description: string;
  status: ApprovalStatus;
};

export const ApprovalForm: FC<ApprovalFormProps> = ({
  approval,
  handleSubmit,
}) => {
  const dialogForm = useForm<FormInputs>(
    approval
      ? {
          defaultValues: approval,
        }
      : {},
  );

  return (
    <div className="flex flex-col gap-2">
      <div className="flex flex-col gap-4">
        <form
          className="flex flex-col"
          onSubmit={dialogForm.handleSubmit(handleSubmit)}
        >
          <input
            className="mb-2 w-full border rounded px-3 py-2"
            placeholder="Title"
            {...dialogForm.register('title', { required: true })}
          />
          <input
            placeholder="Department"
            className="mb-2 w-full border rounded px-3 py-2"
            {...dialogForm.register('department', { required: true })}
          />
          <textarea
            placeholder="Description"
            className="mb-2 w-full border rounded px-3 py-2"
            rows={3}
            {...dialogForm.register('description', { required: true })}
          />
          <button
            type="submit"
            className="hover:bg-blue-600 self-end rounded bg-blue-5 px-4 py-2 text-white"
          >
            Save
          </button>
        </form>
      </div>
    </div>
  );
};
