# frozen_string_literal: true

module Ariadne
  # Use `TabNavComponent` to style navigation links, typically placed at the top
  # of the page.
  #
  # For panel navigation, use <%= link_to_component(Ariadne::TabContainerComponent) %> instead.
  #
  # @accessibility
  #   - By default, `TabNavComponent` renders links within a `<nav>` element. `<nav>` has an
  #     implicit landmark role of `navigation` which should be reserved for main links.
  #     For all other set of links, set tag to `:div`.
  #   - See <%= link_to_component(Ariadne::TabComponent) %> for additional
  #     accessibility considerations.
  class TabNavComponent < Ariadne::Component
    DEFAULT_TAG = :nav
    TAG_OPTIONS = [DEFAULT_TAG, :div].freeze

    BODY_TAG_DEFAULT = :ul

    # keep this consistent with tab-container-component.ts
    SELECTED_CLASSES = "ariadne-border-indigo-500 ariadne-text-indigo-600"
    UNSELECTED_CLASSES = "ariadne-text-gray-500 hover:ariadne-text-gray-700 hover:ariadne-border-gray-300"

    DEFAULT_CLASSES = ""

    # Tabs to be rendered. Use the tabs to list page links.
    #
    # @param selected [Boolean] Whether the tab is selected.
    # @param classes [String] <%= link_to_classes_docs %>
    # @param attributes [Hash] <%= link_to_attributes_docs %>
    renders_many :tabs, lambda { |selected: false, href: nil, classes: "", attributes: {}|
      attributes[:href] = href
      attributes[:"data-tab-nav-component-target"] = "tab"
      attributes[:"data-action"] = "click->tab-nav-component#toggle"

      actual_classes = class_names(selected ? SELECTED_CLASSES : UNSELECTED_CLASSES, classes)
      Ariadne::TabComponent.new(
        selected: selected,

        classes: actual_classes,
        attributes: attributes,
      )
    }

    # @example Default with `<nav>`
    #   @description
    #     `<nav>` is a landmark and should be reserved for main navigation links. See <%= link_to_accessibility %>.
    #   @code
    #     <%= render(Ariadne::TabNavComponent.new(label: "Nav")) do |c| %>
    #       <% c.tab(selected: true, href: "#") { "Tab 1" } %>
    #       <% c.tab(href: "#") { "Tab 2" } %>
    #       <% c.tab(href: "#") { "Tab 3" } %>
    #     <% end %>
    #
    # @param label [String] Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements.
    # @param tag [Symbol, String] The rendered tag name.
    # @param classes [String] <%= link_to_classes_docs %>
    # @param attributes [Hash] <%= link_to_attributes_docs %>
    def initialize(label:, tag: DEFAULT_TAG, classes: "", attributes: {})
      @tag = check_incoming_tag(DEFAULT_TAG, tag)
      @classes = class_names(
        DEFAULT_CLASSES,
        classes,
      )

      @attributes = attributes
      @attributes[:"aria-label"] = label
      @attributes[:"data-controller"] = "tab-nav-component"
    end
  end
end