import React from "react";
import { useForm } from "react-hook-form";
import { ContinueButton, RadioPanel } from "../components/atoms";
import { StagerComponent } from "../components/stager";
import { Summary } from "../components/summary";
import { FormSchema } from "../schema";

export const PaymentPage: StagerComponent<FormSchema> = ({ data, onCompleted }) => {
  const form = useForm({
    defaultValues: data as FormSchema
  });

  return (
    <form
      className="form-content"
      noValidate
      onSubmit={form.handleSubmit(onCompleted)}
    >
      <div>
        <Summary data={data} />
      </div>

      <fieldset className="radio-grid form-section" role="radiogroup">
        <legend className="text-md">How would you like to pay?</legend>
        <RadioPanel
          name="paymentMethod"
          value="directDebit"
          label="Direct Debit"
          form={form}
        />
        <RadioPanel
          name="paymentMethod"
          value="creditCard"
          label="Credit or Debit Card"
          form={form}
        />
      </fieldset>

      <ContinueButton />
    </form>
  );
};