# typed: false
# frozen_string_literal: true

module Ariadne
  module UI
    module Badge
      class Component < Ariadne::BaseComponent
        option :text, default: proc { nil }
        option :size, default: proc { :md }

        # Leading visuals appear to the left of the badge text.
        #
        # Use:
        #
        # - `leading_visual_heroicon` for a <%= link_to_component(Ariadne::UI::Heroicon::Component) %>.
        # - `leading_visual_color_dot` for a <%= link_to_component(Ariadne::UI::ColorDot::Component) %>.
        renders_one :leading_visual, types: {
          heroicon: lambda { |**options|
            options[:size] = size
            Ariadne::UI::Heroicon::Component.new(**options)
          },
          color_dot: lambda { |**options|
            options[:size] = size # Use the same size as the badge
            Ariadne::UI::ColorDot::Component.new(**options)
          },
        }

        include Ariadne::Behaviors::Tooltipable

        # must be dont here rather than within an `accepts_html_attributes` block
        # because the padding class is dependent on the slot's existence, which isn't known until now
        def before_render
          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(size:, with_leading_item: leading_visual ? :yes : :no), html_attrs[:class]].join(" "))
        end

        style do
          base do
            [
              "ariadne-truncate",
              "ariadne-max-w-full",
              "ariadne-border-0.5",
              "ariadne-border-solid",
              "ariadne-border-black/10",
              "dark:ariadne-border-white/10",
              "ariadne-text-content",
              "dark:ariadne-text-content-dark",
            ]
          end

          variants do
            with_leading_item do
              yes { "ariadne-inline-flex ariadne-items-center" }
              no { "ariadne-inline-block" }
            end

            size do
              xs { "ariadne-leading-5 ariadne-text-xs ariadne-rounded-md" }
              sm { "ariadne-leading-6 ariadne-text-sm ariadne-rounded-lg" }
              md { "ariadne-leading-7 ariadne-text-base ariadne-rounded-xl" }
            end
          end

          compound(size: :xs, with_leading_item: :yes) { ["ariadne-pe-1 ariadne-ps-0.5"] }
          compound(size: :sm, with_leading_item: :yes) { ["ariadne-pe-1.5 ariadne-ps-0.5"] }
          compound(size: :md, with_leading_item: :yes) { ["ariadne-pe-1.5 ariadne-ps-0.5"] }

          compound(size: :xs, with_leading_item: :no) { ["ariadne-px-1"] }
          compound(size: :sm, with_leading_item: :no) { ["ariadne-px-1.5"] }
          compound(size: :md, with_leading_item: :no) { ["ariadne-px-2"] }
        end
      end
    end
  end
end