Destructive action

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

module Case = {
  @react.component
  let make = (~name, ~opener, ~dialogId, ~consequence, ~lead, ~secondary) => {
    let caseRef = React.useRef(Nullable.null)
    let dialogRef = React.useRef(Nullable.null)
    let (open_, setOpen) = 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
    })
    <details ref={ReactDOM.Ref.domRef(caseRef)}>
      <summary>{React.string(name)}</summary>
      <KitReact.Roles.SecondaryAction props={{id: opener, type_: "button", onClick: _ => setOpen(_ => true)}}>{React.string(name)}</KitReact.Roles.SecondaryAction>
      <KitReact.Roles.Dialog
        open_
        returnFocus=opener
        onOpen={() => setOpen(_ => true)}
        onClose={() => setOpen(_ => false)}
        id=dialogId
        props={{ref: ReactDOM.Ref.domRef(dialogRef), ariaLabelledby: dialogId ++ "-title"}}
        heading={React.string(name)}
        headingProps={{id: dialogId ++ "-title"}}
        lead
        secondaryAction={{children: React.string(secondary)}}
      >
        consequence
      </KitReact.Roles.Dialog>
    </details>
  }
}

@react.component
let make = () => {
  <>
    <KitReact.Roles.DestructiveAction icon=KitReact.Icons.iconTrash>{React.string("Delete the booking")}</KitReact.Roles.DestructiveAction>
    <p className="specimen-case-line">{React.string("A Destructive action confirming an Inline consequence.")}</p>
    <KitReact.Roles.InlineConsequence
      props={{ariaLabel: "Delete the Oakmere WI booking"}}
      subject={React.string("Oakmere WI booking")}
      consequence={React.string("Deleting this booking frees Tuesday in the Main Hall and removes its invoice.")}
      effectiveTime={React.string("Takes effect as soon as you confirm.")}
      correctionPath={<></>}
      action={{action: <KitReact.Roles.DestructiveAction icon=KitReact.Icons.iconTrash>{React.string("Delete the booking")}</KitReact.Roles.DestructiveAction>}}
    />
    <p className="specimen-case-line">{React.string("A Destructive action last in an Action group.")}</p>
    <KitReact.Roles.ActionGroup
      lead=PrimaryAction({children: React.string("Save the booking")})
      secondary=[SecondaryAction({children: React.string("Duplicate")}), DestructiveAction({icon: KitReact.Icons.iconTrash, children: React.string("Delete the booking")})]
      return={<KitReact.Roles.WayBack href="#role-destructive-action">{React.string("Return to bookings")}</KitReact.Roles.WayBack>}
    />
    <p className="specimen-case-line">{React.string("A Destructive action that waits.")}</p>
    <KitReact.Roles.ActionGroup secondary=[DestructiveAction({icon: KitReact.Icons.iconTrash, children: React.string("Delete the hall"), state: KitReact.ActionState.Inert({id: "delete-hall", words: [KitReact.Words.Text("You can delete the hall once its last booking is over.")]})})] />
    <p className="specimen-case-line">{React.string("A Destructive action leading a Dialog.")}</p>
    <Case
      name="Delete the booking"
      opener="destructive-booking-opener"
      dialogId="destructive-booking-dialog"
      consequence={<KitReact.Roles.InlineConsequence
        region=KitReact.Roles.InlineConsequence.Consequence
        props={{ariaLabel: "Delete the Oakmere WI booking"}}
        subject={React.string("Oakmere WI booking")}
        consequence={React.string("Deleting this booking frees Tuesday in the Main Hall and removes its invoice.")}
        effectiveTime={React.string("Takes effect as soon as you confirm.")}
        correctionPath={<></>}
      />}
      lead=DestructiveAction({icon: KitReact.Icons.iconTrash, children: React.string("Delete the booking")})
      secondary="Keep the booking"
    />
    <p className="specimen-case-line">{React.string("A Dialog that asks for the name of work others share before deleting it.")}</p>
    <Case
      name="Delete the workspace"
      opener="destructive-workspace-opener"
      dialogId="destructive-workspace-dialog"
      consequence={<KitReact.Roles.InlineConsequence
        region=KitReact.Roles.InlineConsequence.Consequence
        props={{ariaLabel: "Delete the Northwind workspace"}}
        subject={React.string("Northwind")}
        consequence={React.string("Deleting Northwind removes its projects and files for everyone in it, and cannot be undone.")}
        effectiveTime={React.string("Takes effect as soon as you confirm.")}
        correctionPath={<></>}
      />}
      lead=DestructiveAction({
        icon: KitReact.Icons.iconTrash,
        children: React.string("Delete the workspace"),
        state: Confirmation({
          name: "Northwind",
          id: "destructive-workspace-delete",
          words: [KitReact.Words.Text("Type Northwind to delete it.")],
          formGroups: <KitReact.Roles.FormGroup id="destructive-workspace-name-form-group"
            label={React.string("Workspace name")}
            labelProps={{htmlFor: "destructive-workspace-name"}}
            controlProps={{id: "destructive-workspace-name", name: "name", type_: "text"}}
            printedValue={React.string("No name typed")}
            kind=Text(Medium)
          />,
        }),
      })
      secondary="Keep the workspace"
    />
  </>
}

@react.component
let make = () => {
  <>
    <KitReact.Roles.DestructiveAction icon=KitReact.Icons.iconTrash submitting=true>{React.string("Delete the booking")}</KitReact.Roles.DestructiveAction>
  </>
}