Agreement

let terms = "#role-agreement-terms"

@set external disclose: (Dom.element, bool) => unit = "open"
type event
@send external listen: (Dom.element, string, event => unit) => unit = "addEventListener"
@send external unlisten: (Dom.element, string, event => unit) => unit = "removeEventListener"

@react.component
let make = () => {
  let (open_, setOpen) = React.useState(() => false)
  let dialogRef = React.useRef(Nullable.null)
  let caseRef = React.useRef(Nullable.null)
  let (inertOpen, setInertOpen) = React.useState(() => false)

  React.useEffect0(() => switch (Nullable.toOption(caseRef.current), Nullable.toOption(dialogRef.current)) {
  | (Some(details), Some(dialog)) =>
    let discloseCase = _ => details->disclose(true)
    listen(dialog, "beforetoggle", discloseCase)
    Some(() => unlisten(dialog, "beforetoggle", discloseCase))
  | _ => None
  })

  <>
    <p>{React.string("In a Dialog, Agreement wraps the Dialog’s Primary action, and its closing action follows it.")}</p>
    <details ref={ReactDOM.Ref.domRef(caseRef)}>
      <summary>{React.string("Change card")}</summary>
      <KitReact.Roles.SecondaryAction props={{id: "role-agreement-dialog-opener", type_: "button", onClick: _ => setOpen(_ => true)}}>{React.string("Change card")}</KitReact.Roles.SecondaryAction>
      <KitReact.Roles.Dialog
        open_
        returnFocus="role-agreement-dialog-opener"
        onOpen={() => setOpen(_ => true)}
        onClose={() => setOpen(_ => false)}
        id="role-agreement-dialog"
        props={{ref: ReactDOM.Ref.domRef(dialogRef), ariaLabelledby: "role-agreement-dialog-title"}}
        heading={React.string("Change card")}
        headingProps={{id: "role-agreement-dialog-title"}}
        formGroups={<form id="role-agreement-dialog-card" action="#role-agreement-result" method="get">
          <KitReact.Roles.FormGroup id="role-agreement-dialog-name-form-group"
            label={React.string("Name on card")}
            labelProps={{htmlFor: "role-agreement-dialog-name"}}
            controlProps={{id: "role-agreement-dialog-name", name: "name", autoComplete: "cc-name"}}
            controlValue="Aisha Khan"
            printedValue={React.string("Aisha Khan")}
            kind=Text(Medium)
          />
        </form>}
        lead={PrimaryAction({
          children: React.string("Save card"),
          agreement: {
            text: <>{React.string("By saving this card, you allow Oakmere Village Hall to charge it for later invoices on their due date. You can remove the card from your account at any time. ")}<a href=terms target="_blank" rel="noopener">{React.string("Read the card terms")}</a>{React.string(".")}</>,
            props: {},
            textProps: {},
            actionProps: {},
          },
          props: {type_: "submit", form: "role-agreement-dialog-card"},
        })}
        secondaryAction={{children: React.string("Keep current card"), props: {type_: "button"}}}
      />
    </details>
    <details>
      <summary>{React.string("Change card while the current card is being checked")}</summary>
      <KitReact.Roles.SecondaryAction props={{id: "role-agreement-inert-dialog-opener", type_: "button", onClick: _ => setInertOpen(_ => true)}}>{React.string("Change card")}</KitReact.Roles.SecondaryAction>
      <KitReact.Roles.Dialog
        open_=inertOpen
        returnFocus="role-agreement-inert-dialog-opener"
        onOpen={() => setInertOpen(_ => true)}
        onClose={() => setInertOpen(_ => false)}
        id="role-agreement-inert-dialog"
        props={{ariaLabelledby: "role-agreement-inert-dialog-title"}}
        heading={React.string("Change card")}
        headingProps={{id: "role-agreement-inert-dialog-title"}}
        formGroups={<form id="role-agreement-inert-dialog-card" action="#role-agreement-result" method="get">
          <KitReact.Roles.FormGroup id="role-agreement-inert-dialog-name-form-group"
            label={React.string("Name on card")}
            labelProps={{htmlFor: "role-agreement-inert-dialog-name"}}
            controlProps={{id: "role-agreement-inert-dialog-name", name: "name", autoComplete: "cc-name"}}
            controlValue="Aisha Khan"
            printedValue={React.string("Aisha Khan")}
            kind=Text(Medium)
          />
        </form>}
        lead={PrimaryAction({
          children: React.string("Save card"),
          state: Inert({id: "role-agreement-save-card", words: [KitReact.Words.Text("Wait for the current card to be checked before saving.")]}),
          agreement: {
            text: <>{React.string("By saving this card, you allow Oakmere Village Hall to charge it for later invoices on their due date. You can remove the card from your account at any time. ")}<a href=terms target="_blank" rel="noopener">{React.string("Read the card terms")}</a>{React.string(".")}</>,
            props: {},
            textProps: {},
            actionProps: {},
          },
          props: {type_: "submit", form: "role-agreement-inert-dialog-card"},
        })}
        secondaryAction={{children: React.string("Keep current card"), props: {type_: "button"}}}
      />
    </details>
    <section id="role-agreement-terms" ariaLabelledby="role-agreement-terms-title">
      <h3 id="role-agreement-terms-title">{React.string("Card terms")}</h3>
      <p>{React.string("Oakmere Village Hall keeps your card to charge the invoices you owe for your bookings. Each charge is taken on the invoice’s due date and is never more than the invoice’s amount due.")}</p>
      <p>{React.string("We email you the invoice before its due date. You can remove your card from your account at any time; invoices after that are paid by bank transfer.")}</p>
      <p><KitReact.Roles.WayBack href="#role-agreement">{React.string("Return to payment")}</KitReact.Roles.WayBack></p>
    </section>
    <section id="role-agreement-privacy" ariaLabelledby="role-agreement-privacy-title">
      <h3 id="role-agreement-privacy-title">{React.string("Privacy statement")}</h3>
      <p>{React.string("Your payment details are kept with your invoice.")}</p>
      <p><KitReact.Roles.WayBack href="#role-agreement">{React.string("Return to payment")}</KitReact.Roles.WayBack></p>
    </section>
    <section id="role-agreement-result" ariaLabelledby="role-agreement-result-title">
      <h3 id="role-agreement-result-title">{React.string("After the action")}</h3>
      <p>{React.string("Each task above submits here. The page shows its own success.")}</p>
    </section>
  </>
}