<%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
  <%= pb_rails("flex/flex_item") do %>
    <span id='regular-tooltip-1'>Hover here (Top)</span>

    <%= pb_rails("tooltip", props: {
      trigger_element_selector: "#regular-tooltip-1",
      tooltip_id: "tooltip-1",
      position: 'top'
    }) do %>
        Whoa. I'm a tooltip.
    <% end %>
  <% end %>

  <%= pb_rails("flex/flex_item") do %>
    <span id='regular-tooltip-2'>Hover here (Bottom)</span>
    <%= pb_rails("tooltip", props: {
      trigger_element_selector: "#regular-tooltip-2",
      tooltip_id: "tooltip-2",
      position: 'bottom'
    }) do %>
        Whoa. I'm a tooltip.
    <% end %>
  <% end %>

  <%= pb_rails("flex/flex_item") do %>
    <span id='regular-tooltip-3'>Hover here (Right)</span>
    <%= pb_rails("tooltip", props: {
      trigger_element_selector: "#regular-tooltip-3",
      tooltip_id: "tooltip-3",
      position: 'right'
    }) do %>
        Whoa. I'm a tooltip.
    <% end %>
  <% end %>

  <%= pb_rails("flex/flex_item") do %>
    <span id='regular-tooltip-4'>Hover here (Left)</span>
    <%= pb_rails("tooltip", props: {
      trigger_element_selector: "#regular-tooltip-4",
      tooltip_id: "tooltip-4",
      position: 'left'
    }) do %>
        Whoa. I'm a tooltip.
    <% end %>
  <% end %>
<% end %>

<%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
  <%= pb_rails("flex/flex_item") do %>
    <%= pb_rails("button", props: { text: "With Interaction", id: "tooltip-interaction"}) %>

    <%= pb_rails("tooltip", props: {
      trigger_element_selector: "#tooltip-interaction",
      tooltip_id: "tooltip-with-interaction",
      position: 'top',
      interaction: true
    }) do %>
        You can copy me
    <% end %>
  <% end %>

  <%= pb_rails("flex/flex_item") do %>
    <%= pb_rails("button", props: { text: "No Interaction", id: "tooltip-no-interaction"}) %>

    <%= pb_rails("tooltip", props: {
      trigger_element_selector: "#tooltip-no-interaction",
      tooltip_id: "tooltip-without-interaction",
      position: 'top',
    }) do %>
        I'm just a regular tooltip
    <% end %>
  <% end %>
<% end %>

<%= pb_rails("flex", props: { orientation: "column" }) do %>
  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
    <%= pb_rails("button", props: {classname: "tooltip-example-trigger", text: "Example 1"}) %>
  <% end %>

  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
    <%= pb_rails("button", props: {classname: "tooltip-example-trigger", text: "Example 1"}) %>
  <% end %>

  <%= pb_rails("tooltip", props: {
      trigger_element_selector: ".tooltip-example-trigger",
      tooltip_id: "example-tooltip",
      position: 'top'
    }) do %>
        Whoa. I'm a re-useable tooltip.
  <% end %>
<% end %>

<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
  <%= pb_rails "button", props: { id: "tool-tip-sizing-1", text: "Height and Width" } %>
  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-1", tooltip_id: "tool-tip-sizing-1", position: "top", height: "150px", width: "100px" } do %>
    I'm 150px high and 100px wide!
  <% end %>
  <%= pb_rails "button", props: { id: "tool-tip-sizing-2", text: "max_height" } %>
  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-2", tooltip_id: "tool-tip-sizing-2", position: "top", width: "250px", max_height: "100px" } do %>
    I have a max_height of 100px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
  <% end %>
  <%= pb_rails "button", props: { id: "tool-tip-sizing-3", text: "max_width" } %>
  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-3", tooltip_id: "tool-tip-sizing-3", position: "top", max_width: "150px" } do %>
    I have a max_width of 150px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
  <% end %>
  <%= pb_rails "button", props: { id: "tool-tip-sizing-4", text: "min_width" } %>
  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-4", tooltip_id: "tool-tip-sizing-4", position: "top", min_width: "300px" } do %>
    I have a min_width of 300px!
  <% end %>
  <%= pb_rails "button", props: { id: "tool-tip-sizing-5", text: "min_height" } %>
  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-5", tooltip_id: "tool-tip-sizing-5", position: "top", min_height: "300px", height: "200px"  } do %>
    I have a min_height of 300px!
  <% end %>
<% end %>

<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
  <%= pb_rails "button", props: { id: "tool-tip-with-icon-1", text: "Tooltip With Icon" } %>
  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-1", tooltip_id: "tool-tip-with-icon-1", position: "top" } do %>
    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
    Send Email
  <% end %>
  <%= pb_rails "button", props: { id: "tool-tip-with-icon-2", text: "Tooltip With Icon" } %>
  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-2", tooltip_id: "tool-tip-with-icon-2", position: "bottom" } do %>
    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
    Send Email
  <% end %>
  <%= pb_rails "button", props: { id: "tool-tip-with-icon-3", text: "Tooltip With Icon" } %>
  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-3", tooltip_id: "tool-tip-with-icon-3", position: "left" } do %>
    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
    Send Email
  <% end %>
  <%= pb_rails "button", props: { id: "tool-tip-with-icon-4", text: "Tooltip With Icon" } %>
  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-4", tooltip_id: "tool-tip-with-icon-4", position: "right" } do %>
    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
    Send Email
  <% end %>
<% end %>

<%= pb_rails("icon_circle", props: { icon: "paper-plane", id: "result-1-sample-email-link" }) %>

<%= pb_rails("tooltip", props: {
  trigger_element_id: "result-1-sample-email-link",
  tooltip_id: "sample-email-tooltip-result-1",
  position: "top"
}) do %>
  Send Email
<% end %>

<%= pb_rails("flex", props: { orientation: "row", gap: "md" }) do %>
  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
    <%= pb_rails("button", props: {classname: "tooltip-delay", text: "1s delay"}) %>
  <% end %>

  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
    <%= pb_rails("button", props: {classname: "tooltip-open-delay", text: "Open only"}) %>
  <% end %>

  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
    <%= pb_rails("button", props: {classname: "tooltip-close-delay", text: "Close only"}) %>
  <% end %>

  <%= pb_rails("tooltip", props: {
      trigger_element_selector: ".tooltip-delay",
      tooltip_id: "delay-tooltip",
      position: 'top',
      delay_open: 1000,
      delay_close: 1000
    }) do %>
        1s open/close delay 
  <% end %>
  <%= pb_rails("tooltip", props: {
      trigger_element_selector: ".tooltip-open-delay",
      tooltip_id: "open-tooltip",
      position: 'top',
      delay_open: 1000
    }) do %>
        1s open delay 
  <% end %>
  <%= pb_rails("tooltip", props: {
      trigger_element_selector: ".tooltip-close-delay",
      tooltip_id: "close-tooltip",
      position: 'top',
      delay_close: 1000
    }) do %>
        1s close delay 
  <% end %>
<% end %>

<%= pb_rails("flex", props: { orientation: "column", gap: "md" }) do %>
  <%= pb_rails("button", props: {text: "Toggle state", id: "toggle-tooltip-button"}) %>
  <%= pb_rails("body") do %>
      Tooltip is: <code id="show-tooltip-state">enabled</code>
  <% end %>
  <%= pb_rails("flex/flex_item") do %>
    <span id="truncated-tooltip-1">Hover me</span>
    <%= pb_rails("tooltip", props: {
      trigger_element_selector: "#truncated-tooltip-1",
      tooltip_id: "truncated-1",
      position: "right",
    }) do %>
        Tooltip is enabled
    <% end %>
  <% end %>
<% end %>

<script>
const toggleTooltipButton = document.getElementById("toggle-tooltip-button");
const showTooltipStateText = document.getElementById("show-tooltip-state");

function hideTooltipIfNotTruncated(tooltipId) {
  const tooltipElement = document.querySelector(
    `[data-pb-tooltip-tooltip-id="${tooltipId}"]`
  );

  tooltipElement.dataset.pbTooltipShowTooltip =
    tooltipElement.dataset.pbTooltipShowTooltip == "false" ? "true" : "false";

  showTooltipStateText.innerText = 
    tooltipElement.dataset.pbTooltipShowTooltip == "false" ? "disabled" : "enabled";
}

toggleTooltipButton.addEventListener("click", () => {
  hideTooltipIfNotTruncated("truncated-1");
});
</script>

<%= pb_rails("button", props: { 
  text: "Click to Open",
  id: "click-tooltip-trigger-1",
  variant: "primary"
}) %>

<%= pb_rails("tooltip", props: {
  trigger_element_selector: "#click-tooltip-trigger-1",
  tooltip_id: "click-tooltip-1",
  position: "top",
  use_click_to_open: true
}) do %>
  Tooltip opened by click! Click trigger again to close.
<% end %>