Popover

export const PopoverStyle = forSlots(PopoverSlots)(Recipes.Popover({}))

export const popover = <Message>(
  style: NamedStyle<typeof PopoverSlots>,
  model: UiPopover.Model,
  toMessage: (message: UiPopover.Message) => Message,
  h: HtmlBuilder<Message>,
): Html =>
  h.submodel({
    slotId: model.id,
    model,
    view: UiPopover.view,
    viewInputs: {
      // In place: a portal moves the panel out of the page that drew it.
      anchor: { placement: 'bottom-start', gap: 4, padding: 8, portal: false },
      toView: Popover.toView([style.mixin], { h }, popover =>
        h.div(
          [],
          [
            h.button(popover.button, ['Share']),
            ...(popover.isVisible
              ? [
                  h.div(popover.backdrop, []),
                  h.div(popover.panel, [h.p([], ['Anyone with the link can view this page.'])]),
                ]
              : []),
          ],
        ),
      ),
    },
    toParentMessage: toMessage,
  })