# frozen_string_literal: true

module Ariadne
  # `Heading` should be used to communicate page organization and hierarchy.
  #
  # - Set tag to one of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, `:h6` based on what is appropriate for the page context.
  # - Use `Heading` as the title of a section or sub section.
  # - Do not use `Heading` for styling alone. For simply styling text, consider using <%= link_to_component(Ariadne::Text) %> with relevant <%= link_to_typography_docs %>
  #   such as `font_size` and `font_weight`.
  # - Do not jump heading levels. For instance, do not follow a `<h1>` with an `<h3>`. Heading levels should increase by one in ascending order.
  #
  # @accessibility
  #   While sighted users rely on visual cues such as font size changes to determine what the heading is, assistive technology users rely on programatic cues that can be read out.
  #   When text on a page is visually implied to be a heading, ensure that it is coded as a heading. Additionally, visually implied heading level and coded heading level should be
  #   consistent. [See WCAG success criteria: 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)
  #
  #   Headings allow assistive technology users to quickly navigate around a page. Navigation to text that is not meant to be a heading can be a confusing experience.
  #   <%= link_to_heading_practices %>
  class HeadingComponent < Ariadne::Component
    TAG_OPTIONS = [:h1, :h2, :h3, :h4, :h5, :h6].freeze

    TAG_TO_CLASSES = {
      h1: "ariadne-font-bold ariadne-leading-7 sm:ariadne-text-3xl",
      h2: "ariadne-text-3xl ariadne-font-extrabold",
      h3: "ariadne-text-2xl ariadne-font-extrabold",
    }
    # @example Default
    #   <%= render(Ariadne::HeadingComponent.new(tag: :h1)) { "H1 Text" } %>
    #   <%= render(Ariadne::HeadingComponent.new(tag: :h2)) { "H2 Text" } %>
    #   <%= render(Ariadne::HeadingComponent.new(tag: :h3)) { "H3 Text" } %>
    #   <%= render(Ariadne::HeadingComponent.new(tag: :h4)) { "H4 Text" } %>
    #   <%= render(Ariadne::HeadingComponent.new(tag: :h5)) { "H5 Text" } %>
    #   <%= render(Ariadne::HeadingComponent.new(tag: :h6)) { "H6 Text" } %>
    #
    # @param tag [String]  <%= one_of(Ariadne::HeadingComponent::TAG_OPTIONS) %>
    # @param classes [String] <%= link_to_classes_docs %>
    # @param attributes [Hash] <%= link_to_attributes_docs %>
    def initialize(tag: nil, classes: "", attributes: {})
      @tag = fetch_or_raise(TAG_OPTIONS, tag)
      @attributes = attributes

      @classes = merge_class_names(*TAG_TO_CLASSES[tag], classes)
    end

    def call
      render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { content }
    end
  end
end