# typed: false
# frozen_string_literal: true

module Ariadne
  module UI
    module Combobox
      class Component < BaseComponent
        option :placement, default: proc { "bottom" }
        option :show_search, default: proc { :yes }
        option :size, default: proc { :md }

        option :clamped, default: proc { false }

        option :changed_action, optional: true

        option :filter_placeholder, default: proc { "Filter…" }

        renders_many :options, Ariadne::UI::Combobox::MenuItem::Component
        renders_one :selector, ->(size:, icon:) do
          render(Ariadne::UI::Button::Component.new(theme: :ghost, size: size, icon_only: :yes)) do
            render(Ariadne::UI::Heroicon::Component.new(icon: icon, variant: :solid, size: size))
          end
        end

        def any_options?
          options.any?
        end

        accepts_html_attributes do |html_attrs|
          html_attrs[:data] = {
            controller: "input-filter #{stimulus_name}",
            "#{stimulus_name}-placement-value": placement,
            "#{stimulus_name}-clamped-value": clamped,
          }
          if changed_action
            html_attrs[:data][:action] = "#{stimulus_name}:changed->#{changed_action}"
          end
        end

        accepts_html_attributes_for :input,
          autocomplete: "off",
          autofocus: true,
          type: "search",
          placeholder: proc { @filter_placeholder },
          data: {
            "input-filter-target": "input",
            "#{stimulus_name}-target": "searchInput",
            "action": "input-filter#handleInput",
          }

        style :popover do
          base do
            [
              "fixed",
              "max-w-[90vw]",
              "z-20",
              "scroll",
              "scrollbar-trigger",
              "rounded-lg",
              "shadow-lg",
              "bg-white",
              "dark:bg-zinc-900",
            ]
          end

          variants do
            size do
              sm { "w-36" }
              md { "w-52" }
              lg { "w-96" }
            end
          end
        end

        style :options do
          base do
            ["overflow-auto", "p-2"]
          end
        end
      end
    end
  end
end