Modal

<%= render(Hakumi::Button::Component.new(type: :primary, data: {
  controller: "hakumi--modal-trigger",
  hakumi__modal_trigger_modal_id_value: "basic-modal"
})) { "Open Modal" } %>

<%= render Hakumi::Modal::Component.new(
  id: "basic-modal",
  title: "Basic Modal",
  open: false
) do %>
  <p>Some contents...</p>
  <p>Some contents...</p>
  <p>Some contents...</p>
<% end %>

<%= render(Hakumi::Button::Component.new(type: :primary, data: {
  controller: "hakumi--modal-trigger",
  hakumi__modal_trigger_modal_id_value: "custom-footer-modal"
})) { "Open Modal with Custom Footer" } %>

<% custom_footer = capture do %>
  <%= render(Hakumi::Button::Component.new(data: { "hakumi-modal-close": true })) { "Return" } %>
  <%= render(Hakumi::Button::Component.new(type: :primary, loading: true, data: { "hakumi-modal-ok": true })) { "Submit" } %>
<% end %>

<%= render Hakumi::Modal::Component.new(
  id: "custom-footer-modal",
  title: "Modal with Custom Footer",
  open: false,
  footer: custom_footer
) do %>
  <p>Some contents...</p>
  <p>Some contents...</p>
  <p>Some contents...</p>
<% end %>

<%= render(Hakumi::Button::Component.new(type: :primary, data: {
  controller: "hakumi--modal-trigger",
  hakumi__modal_trigger_modal_id_value: "loading-modal"
})) { "Open Modal with Loading" } %>

<%= render Hakumi::Modal::Component.new(
  id: "loading-modal",
  title: "Basic Modal",
  open: false,
  confirm_loading: true
) do %>
  <p>Some contents...</p>
  <p>Some contents...</p>
  <p>Some contents...</p>
<% end %>

<%= render(Hakumi::Button::Component.new(type: :primary, data: {
  controller: "hakumi--modal-trigger",
  hakumi__modal_trigger_modal_id_value: "async-modal"
})) { "Open Modal with Async Logic" } %>

<%= render Hakumi::Modal::Component.new(
  id: "async-modal",
  title: "Async Modal",
  open: false,
  confirm_loading: false
) do %>
  <p>The modal will be closed after two seconds</p>
<% end %>

<%= render(Hakumi::Button::Component.new(type: :primary, data: {
  controller: "hakumi--modal-trigger",
  hakumi__modal_trigger_modal_id_value: "mask-closable-modal"
})) { "Open Modal (Cannot close with backdrop)" } %>

<%= render Hakumi::Modal::Component.new(
  id: "mask-closable-modal",
  title: "Modal with mask_closable: false",
  open: false,
  mask_closable: false
) do %>
  <p>This modal cannot be closed by clicking on the backdrop.</p>
  <p>You must use the X button or the Cancel/OK buttons to close it.</p>
<% end %>

<%= render Hakumi::Space::Component.new(size: :small, wrap: true) do %>
  <%= render(Hakumi::Button::Component.new(data: {
    controller: "hakumi--modal-trigger",
    hakumi__modal_trigger_modal_id_value: "confirm-modal"
  })) { "Confirm" } %>
  <%= render Hakumi::Modal::Confirm::Component.new(
    id: "confirm-modal",
    title: "Confirm",
    message: "Do you want to delete these items?",
    open: false
  ) %>

  <%= render(Hakumi::Button::Component.new(data: {
    controller: "hakumi--modal-trigger",
    hakumi__modal_trigger_modal_id_value: "info-modal"
  })) { "Info" } %>
  <%= render Hakumi::Modal::Info::Component.new(
    id: "info-modal",
    title: "Info",
    message: "This is an informational message.",
    open: false
  ) %>

  <%= render(Hakumi::Button::Component.new(data: {
    controller: "hakumi--modal-trigger",
    hakumi__modal_trigger_modal_id_value: "success-modal"
  })) { "Success" } %>
  <%= render Hakumi::Modal::Success::Component.new(
    id: "success-modal",
    title: "Success",
    message: "The operation completed successfully!",
    open: false
  ) %>

  <%= render(Hakumi::Button::Component.new(data: {
    controller: "hakumi--modal-trigger",
    hakumi__modal_trigger_modal_id_value: "error-modal"
  })) { "Error" } %>
  <%= render Hakumi::Modal::Error::Component.new(
    id: "error-modal",
    title: "Error",
    message: "An error occurred while processing your request.",
    open: false
  ) %>

  <%= render(Hakumi::Button::Component.new(data: {
    controller: "hakumi--modal-trigger",
    hakumi__modal_trigger_modal_id_value: "warning-modal"
  })) { "Warning" } %>
  <%= render Hakumi::Modal::Warning::Component.new(
    id: "warning-modal",
    title: "Warning",
    message: "This action cannot be undone.",
    open: false
  ) %>
<% end %>

<div class="hakumi-space hakumi-space-horizontal" style="gap: 12px;">
  <%= render(Hakumi::Button::Component.new(type: :primary, id: "programmatic-modal-btn")) { "Render Modal via API" } %>
  <div id="programmatic-modal-target"></div>
</div>

<script>
  (() => {
    const button = document.getElementById("programmatic-modal-btn")
    if (!button) return

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

      button.addEventListener("click", async () => {
        const result = await window.HakumiComponents.renderComponent("modal", {
          params: { title: "Programmatic Modal", message: "Loaded from /hakumi/components/modal", open: true },
          target: "#programmatic-modal-target",
          mode: "destroy_on_close"
        })

        result?.element?.hakumiComponent.api?.open()
      })

      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>