# frozen_string_literal: true

module Ariadne
  # Represents two items side-by-side. Typically, this will be an icon (of CSS classes, SVG, or a Heroicon icon)
  # with optional text.
  #
  # InlineFlexComponent differs from HeroiconComponent in that it is intended to be
  # used within (or next to) text, whereas HeroiconComponent is intended to only
  # present a static list of SVG images (and can be embedded in buttons or shown alone).
  class InlineFlexComponent < Ariadne::Component
    DEFAULT_TAG = :span
    DEFAULT_CLASSES = "ariadne-inline-flex ariadne-items-baseline"

    STATE_OPTIONS = [:closed, :open].freeze

    STATE_OPEN_SVG = <<~MSG
      <svg viewBox="0 0 24 24" width="12" height="12" class="ariadne-stroke-state-open" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"></circle>
      </svg>
    MSG
    STATE_CLOSED_SVG = <<~MSG
      <svg viewBox="0 0 24 24" width="12" height="12" class="ariadne-stroke-state-closed ariadne-fill-state-closed " stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"></circle>
      </svg>
    MSG

    DEFAULT_TEXT_OPEN_CLASSES = "ariadne-text-state-open"
    DEFAULT_TEXT_CLOSED_CLASSES = "ariadne-text-state-closed"
    DEFAULT_TEXT_CLASSES = "ariadne-pl-2 ariadne-text-sm ariadne-font-medium"
    renders_one :icon, lambda { |tag: :svg, icon:, variant:, size: Ariadne::HeroiconComponent::SIZE_DEFAULT, classes: "", attributes: {}, text_classes: "", text_attributes: {}|
      actual_text_classes = merge_class_names(DEFAULT_TEXT_CLASSES, text_classes)
      Ariadne::HeroiconComponent.new(tag: tag, icon: icon, variant: variant, size: size, classes: classes, attributes: attributes, text_classes: actual_text_classes, text_attributes: text_attributes) { content }
    }

    renders_one :item, lambda { |classes: "", attributes: {}|
      Ariadne::BaseComponent.new(tag: :span, classes: classes, attributes: attributes) { content }
    }

    DEFAULT_LABEL_CLASSES = "ariadne-pl-2 ariadne-text-sm ariadne-font-medium"
    renders_one :text, lambda { |classes: "", attributes: {}|
      actual_classes = merge_class_names(DEFAULT_LABEL_CLASSES, classes)
      Ariadne::BaseComponent.new(tag: :span, classes: actual_classes, attributes: attributes) { content }
    }

    renders_one :dropdown, "Ariadne::DropdownComponent"

    # @example Default
    #
    #   <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
    #      <% c.with_item { Ariadne::InlineFlexComponent::STATE_OPEN_SVG.html_safe } %>
    #   <% end %>
    #
    #   # TODO: STATE_CLOSED_SVG colors didn't show until it was listed in an example
    #   <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
    #      <% c.with_item { Ariadne::InlineFlexComponent::STATE_CLOSED_SVG.html_safe } %>
    #   <% end %>
    #
    #   <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
    #      <% c.with_icon(icon: :check, size: :sm, variant: HeroiconsHelper::Icon::VARIANT_SOLID) %>
    #      <% c.with_text { "Closed" } %>
    #   <% end %>
    #
    # @param tag [Symbol, String] The rendered tag name
    # @param classes [String] <%= link_to_classes_docs %>
    # @param attributes [Hash] <%= link_to_attributes_docs %>
    def initialize(tag: DEFAULT_TAG, classes: "", attributes: {})
      @tag = check_incoming_tag(DEFAULT_TAG, tag)
      @classes = merge_class_names(DEFAULT_CLASSES, classes)
      @attributes = attributes
    end
  end
end