<%
menu_items = [
  {
    attributes: { "href": "#" },
    icon: "pen",
    value: "Edit",
  },
  {
    attributes: {
      "href": "https://kajabi.com",
      "data-js-tooltip": "Tooltip",
      "data-js-tooltip-position": "right",
    },
    icon: "pen",
    modifiers: ["disabled"],
    value: "Disabled link w/ tooltip",
  },
  {
    attributes: { "href": "#" },
    icon: "add",
    style: "primary",
    value: "New",
  },
  {
    attributes: { "href": "#" },
    icon: "url",
    modifiers: ["border-before"],
    value: "Share Element",
  },
  {
    attributes: { "href": "#" },
    icon: "remove-circle",
    style: "danger",
    value: "Take A Dangerous Action",
  },
  {
    attributes: {
      "data-js-tooltip": "Tooltip",
      "data-js-tooltip-position": "right",
    },
    icon: "users",
    modifiers: ["disabled"],
    value: "Disabled w/ Tooltip",
  }
]

custom_items = [
  {
    attributes: { "href": "#" },
    value: {
      description: "Customer is chared...",
      graphic: { icon: "pen", card_color: "info" },
      name: "One-time",
    },
  },
  {
    attributes: { "href": "#" },
    value: {
      description: "Bill customers on...",
      graphic: { icon: "pen", card_color: "published" },
      name: "Subscription",
    },
  }, {
    attributes: { "href": "#" },
    value: {
      description: "Require several...",
      graphic: { icon: "pen", card_color: "approaching" },
      name: "Multi-pay",
    },
  },
]
%>

<h3 class="t-sage-heading-6">Menu Dropdown</h3>
<%= sage_component SageDropdown, { items: menu_items } do %>
  <% content_for :sage_dropdown_trigger, flush: true do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Add An Element",
    } %>
  <% end %>
<% end %>

<h3 class="t-sage-heading-6">Menu Dropdown with Arrow</h3>
<%= sage_component SageDropdown, { items: menu_items } do %>
  <% content_for :sage_dropdown_trigger, flush: true do %>
    <%= sage_component SageButton, {
      disclosure: true,
      style: "primary",
      value: "Add An Element",
    } %>
  <% end %>
<% end %>

<h3 class="t-sage-heading-6">Menu Button with Custom Trigger width and Custom Panel Width</h3>
<%= sage_component SageDropdown, {
  panel_width: "512px",
  items: menu_items,
  trigger: { width: "240px" },
} do %>
  <% content_for :sage_dropdown_trigger, flush: true do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Add An Element"
    } %>
  <% end %>
<% end %>

<h3 class="t-sage-heading-6">Rich Text Editor Dropdown with Text</h3>
<%= sage_component SageDropdown, { items: menu_items } do %>
  <% content_for :sage_dropdown_trigger, flush: true do %>
    <%= sage_component SageButton, {
      disclosure: true,
      style: "secondary",
      value: "Text",
      css_classes: "sage-btn--rich-text",
    } %>
  <% end %>
<% end %>

<h3 class="t-sage-heading-6">Rich Text Editor Dropdown with Icon</h3>
<%= sage_component SageDropdown, { items: menu_items } do %>
  <% content_for :sage_dropdown_trigger, flush: true do %>
    <%= sage_component SageButton, {
      disclosure: true,
      icon: { name: "align-left", style: "only" },
      style: "secondary",
      value: "Add An Element",
      css_classes: "sage-btn--rich-text",
    } %>
  <% end %>
<% end %>

<h3 class="t-sage-heading-6">Dropdown menu with Headings</h3>
<%= sage_component SageDropdown, {
  contained: true,
  items: [
    {
      is_heading: true,
      value: "Offers",
    },
    { value: "Grant offer" },
    { value: "Revoke offer" },
    {
      is_heading: true,
      value: "Emails",
    },
    { value: "Subscribe to Email Sequence" },
    { value: "Unsubscribe from Email Sequence" },
    {
      is_heading: true,
      value: "Events",
    },
    { value: "Register to Event" },
    { value: "Deregister from Event" },
    {
      is_heading: true,
      value: "Tags",
    },
    { value: "Add tag" },
    { value: "Remove tag" },
    {
      icon: "upload",
      modifiers: ["border-before"],
      value: "Export",
    },
    {
      icon: "remove-circle",
      value: "Unsubscribe",
    },
    {
      icon: "trash",
      modifiers: ["border-before"],
      style: "danger",
      value: "Delete",
    }
  ]
} do %>
  <% content_for :sage_dropdown_trigger, flush: true do %>
    <%= sage_component SageButton, {
      style: "secondary",
      raised: false,
      value: "Bulk Actions"
    } %>
  <% end %>
<% end %>

<h3 class="t-sage-heading-6">SageBadge Interactive, aligned right</h3>
<p>Note: The wrapping div with inline styles is for <i>preview-purposes only</i>. </p>
<div style="display: flex; flex-direction: row-reverse;">
  <%= sage_component SageDropdown, {
    align: "right",
    panel_size: "small",
    panel_type: "status",
    items: [
      {
        attributes: { "href": "#" },
        value: sage_component(SageBadge, { color: "published", value: "Publish" }),
      },
      {
        attributes: { "href": "#" },
        value: sage_component(SageBadge, { color: "info", value: "Drip" }),
      },
      {
        attributes: { "href": "#" },
        value: sage_component(SageBadge, { color: "draft", value: "Draft" }),
      },
      {
        attributes: {
          "href": "#",
          "data-test": "test method"
        },
        icon: "trash",
        style: "danger",
        value: "Delete",
      }
    ]
  } do %>
    <% content_for :sage_dropdown_trigger, flush: true do %>
      <%= sage_component SageBadge, {
        color: "info",
        icon: "draft",
        interactive_type: :dropdown,
        value: "Drip",
      } %>
    <% end %>
  <% end %>
</div>

<h3 class="t-sage-heading-6">Select</h3>
<p>Note: This pattern is used with the SageReact implementation, please consult UXD before using this as SageRails.</p>
<%= sage_component SageDropdown, {
  contained: true,
  items: [
    { value: "-- None --" },
    {
      selected: true,
      value: "Option 1",
    },
    { value: "Option 2" },
    { value: "Option 3" },
    {
      style: "muted",
      value: "Muted",
    },
    {
      modifiers: ["disabled"],
      value: "Disabled",
    },
    {
      attributes: {
        "data-js-tooltip": "Tooltip",
        "data-js-tooltip-position": "left",
      },
      modifiers: ["disabled"],
      value: "Disabled w/ tooltip",
    }
  ],
  panel_type: "searchable",
  search: true,
  trigger: {
    type: "select",
    label: "Add an Element",
    value: "",
  }
} %>

<h3 class="t-sage-heading-6">Form Field</h3>
<p>Note: This pattern is used with the SageReact implementation, please consult UXD before using this as SageRails.</p>
<%= sage_component SageDropdown, {
  align: "right",
  contained: true,
  items: [
    { value: "-- None --" },
    { value: "Option 1" },
    { value: "Option 2" },
    { value: "Option 3" },
    {
      style: "muted",
      value: "Muted",
    }
  ],
  panel_type: "searchable",
  search: true,
  trigger: {
    type: "select",
    value: "",
    label: "Add an Element",
  }
} %>

<h3 class="t-sage-heading-6">Dropdown Field with full-width Custom Content and Footer</h3>
<%= sage_component SageDropdown, {
  allow_multiple: true,
  contained: true,
  full_width_panel: true,
  panel_type: "searchable",
  search: true,
  trigger: {
    type: "select",
    value: "",
    label: "Select Product(s)",
  },
  wrap_footer: true,
} do %>
  <% content_for :sage_dropdown_custom_panel_content do %>
    <ul class="sage-dropdown__menu sage-dropdown__menu--fixed-height">
      <% 9.times do |i| %>
        <li class="sage-dropdown__item">
          <label for="checkbox-multi-item-<%= i + 1 %>" class="sage-dropdown__item-control sage-dropdown-item-control--group">
            <%= sage_component SageCheckbox, {
              id:"checkbox-multi-item-#{i + 1}",
              css_classes: "sage-dropdown__item-checkbox",
              checked: false,
              disabled: false,
              has_error: false,
              partial_selection: false,
              standalone: true,
            } %>
            <span class="sage-dropdown__item-label">Product <%= i + 1 %></span>
          </label>
        </li>
      <% end %>
    </ul>
  <% end %>
  <% content_for :sage_dropdown_custom_panel_footer do %>
    <%= sage_component SageButtonGroup, { gap: :xs, align: "end" } do %>
      <%= sage_component SageButton, {
        value: "Clear selections",
        style: "secondary",
        raised: false,
        small: true,
      } %>
      <%= sage_component SageButton, {
        value: "Add to Offer",
        style: "primary",
        small: true,
      } %>
    <% end %>
  <% end %>
<% end %>

<h3 class="t-sage-heading-6">Dropdown Menu Button with Custom Content</h3>
<%= sage_component SageDropdown, {} do %>
  <% content_for :sage_dropdown_trigger, flush: true do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Dropdown Trigger",
    } %>
  <% end %>
  <% content_for :sage_dropdown_custom_panel_content do %>
    <%= sage_component SagePanel, {} do %>
      <%= sage_component SagePanelStack, {} do %>
        <p>We can put whatever content we want in here and use the custom class as a hook to style it like a good ol BEM mixin!</p>
        <h4>Dropdown Exit</h4>
        <p class="sage-spacer-bottom-sm">The <code>data-sage-dropdown-exit</code> attribute can be used on elements that need be able to close the custom panel.<p>
        <%= sage_component SageButton, {
          style: "primary",
          value: "Click me to exit",
          attributes: {
            "data-sage-dropdown-exit": true,
          },
        } %>
      <% end %>
    <% end %>
  <% end %>
<% end %>


<h3>Dropdown with Custom Items<h3>

<%= md("
While we generally recommend using the built-in `items` construction that comes with `SageDropdown`,
it is possible to compose custom item content using the `SageDropdownItem` component
and a manual loop within the `sage_dropdown_items` content slot.
See the two examples below where custom item contents are generated for more appealing dropdown items.
", use_sage_type: true) %>

<h4>As a Menu Dropdown</h4>

<%= sage_component SageDropdown, {} do %>
  <% content_for :sage_dropdown_trigger, flush: true do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Product",
      icon: { name: "add", style: "left" },
    } %>
  <% end %>
  <% content_for :sage_dropdown_items do %>
    <% custom_items.each do | item | %>
      <%= sage_component SageDropdownItem, {} do %>
        <%= sage_component SageCardRow, { grid_template: "et" } do %>
          <%= sage_component SageIcon, item[:value][:graphic] %>
          <%= sage_component SageCardBlock, {} do %>
            <h4><%= item[:value][:name] %></h4>
            <p><%= item[:value][:description] %></p>
          <% end %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

<h4>As a Select Dropdown</h4>

<%= sage_component SageDropdown, {
  trigger: {
    type: "select",
    label: "Select a product",
  },
  contained: true,
} do %>
  <% content_for :sage_dropdown_items do %>
    <% custom_items.each do | item | %>
      <%= sage_component SageDropdownItem, {} do %>
        <%= sage_component SageCardRow, { grid_template: "et" } do %>
          <%= sage_component SageIcon, item[:value][:graphic] %>
          <%= sage_component SageCardBlock, {} do %>
            <h4><%= item[:value][:name] %></h4>
            <p><%= item[:value][:description] %></p>
          <% end %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>