Popover

<%= render Hakumi::Popover::Component.new(
  title: "Title",
  body: "This is the content of the popover.",
  trigger: "click",
  id: "popover-basic"
) do %>
  <%= render(Hakumi::Button::Component.new(type: :primary)) { "Click me" } %>
<% end %>

<%= render Hakumi::Space::Component.new(size: :large, wrap: true) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Popover::Component.new(
      title: "Click",
      body: "Trigger is click.",
      trigger: "click"
    ) do %>
      <%= render(Hakumi::Button::Component.new) { "Click" } %>
    <% end %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Popover::Component.new(
      title: "Focus",
      body: "Trigger is focus.",
      trigger: "focus"
    ) do %>
      <%= render(Hakumi::Button::Component.new) { "Focus" } %>
    <% end %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Popover::Component.new(
      title: "Hover",
      body: "Trigger is hover.",
      trigger: "hover"
    ) do %>
      <%= render(Hakumi::Button::Component.new) { "Hover" } %>
    <% end %>
  <% end %>
<% end %>

<%= render Hakumi::Space::Component.new(size: :large) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Popover::Component.new(
      title: "With arrow",
      body: "This popover shows the arrow.",
      trigger: "click"
    ) do %>
      <%= render(Hakumi::Button::Component.new) { "Arrow" } %>
    <% end %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Popover::Component.new(
      title: "No arrow",
      body: "This popover hides the arrow.",
      trigger: "click",
      arrow: false
    ) do %>
      <%= render(Hakumi::Button::Component.new) { "No Arrow" } %>
    <% end %>
  <% end %>
<% end %>

<%= render Hakumi::Space::Component.new(size: :large, align: :center) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Popover::Component.new(
      title: "Controlled",
      body: "This popover is controlled by the open prop.",
      trigger: "click",
      open: true,
      id: "popover-controlled"
    ) do %>
      <%= render(Hakumi::Button::Component.new) { "Controlled" } %>
    <% end %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Space::Component.new(size: :small) do |buttons| %>
      <% buttons.with_item do %>
        <%= render(Hakumi::Button::Component.new(id: "popover-controlled-open")) { "Open" } %>
      <% end %>
      <% buttons.with_item do %>
        <%= render(Hakumi::Button::Component.new(id: "popover-controlled-close")) { "Close" } %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

<script>
  (() => {
    const popover = document.getElementById("popover-controlled")
    const openButton = document.getElementById("popover-controlled-open")
    const closeButton = document.getElementById("popover-controlled-close")

    if (!popover || !openButton || !closeButton) return

    const wire = () => {
      const api = popover.hakumiPopover
      if (!api) return false

      openButton.addEventListener("click", () => api.setOpen(true))
      closeButton.addEventListener("click", () => api.setOpen(false))
      return true
    }

    if (wire()) return

    const onReady = () => {
      if (wire()) {
        document.removeEventListener("turbo:load", onReady)
        window.removeEventListener("load", onReady)
      }
    }

    document.addEventListener("turbo:load", onReady)
    window.addEventListener("load", onReady)
  })()
</script>

<%= render Hakumi::Popover::Component.new(
  title: "Hover or click",
  body: "This popover can be hovered and clicked.",
  trigger: "hover,click"
) do %>
  <%= render(Hakumi::Button::Component.new) { "Hover & Click" } %>
<% end %>

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle) do |space| %>
  <% space.with_item do %>
    <%= render(Hakumi::Button::Component.new(id: "popover-programmatic-button")) { "Render Popover" } %>
  <% end %>
  <% space.with_item do %>
    <div id="popover-programmatic-target"></div>
  <% end %>
<% end %>

<script>
  (() => {
    const button = document.getElementById("popover-programmatic-button")
    const target = document.getElementById("popover-programmatic-target")
    if (!button || !target) return

    const wire = () => {
      if (!window.HakumiComponents?.renderComponent) return false

      button.addEventListener("click", async () => {
        await window.HakumiComponents.renderComponent("popover", {
          target,
          params: {
            title: "Programmatic",
            body: "Rendered via HakumiComponents.renderComponent.",
            body: "Hover me",
            trigger: "hover",
            placement: "bottom"
          }
        })
      })

      return true
    }

    if (wire()) return

    const onReady = () => {
      if (wire()) {
        document.removeEventListener("turbo:load", onReady)
        window.removeEventListener("load", onReady)
      }
    }

    document.addEventListener("turbo:load", onReady)
    window.addEventListener("load", onReady)
  })()
</script>