# typed: false
# frozen_string_literal: true

module Ariadne
  module UI
    module List
      class Component < Ariadne::BaseComponent
        option :as_menu, default: proc { false }

        option :size, default: proc { :md }

        renders_one :filter_field, lambda { |**options|
          raise ArgumentError, "Must provide text for `empty_placeholder`" if options[:empty_placeholder].blank?

          @empty_placeholder = options.delete(:empty_placeholder)

          options.delete(:size)
          options[:width] = :full
          options[:name] = ""
          options[:label] = ""

          options[:html_attrs] ||= {}
          options[:html_attrs].merge!({
            autocomplete: "off",
            autofocus: true,
            type: "search",
            data: {
              "#{stimulus_name}-target": "input",
              action: "#{stimulus_name}#handleInput",
            },
          })

          Ariadne::Form::TextField::Component.new(**options)
        }

        renders_many :checkboxes, Ariadne::Form::Checkbox::Component
        renders_many :radio_buttons, Ariadne::Form::RadioButton::Component
        renders_many :links, lambda { |**options|
          options[:theme] = :nude
          options[:"data-#{stimulus_name}-target"] = "searchString"

          options[:html_attrs] ||= {}
          options[:html_attrs][:class] ||= ""
          options[:html_attrs][:class] = [
            "ariadne-truncate",
            "ariadne-border-b-0",
            "ariadne-flex",
            "ariadne-gap-0.5",
            "ariadne-items-center",
            "ariadne-ps-2",
            "ariadne-pe-1",
            "ariadne-rounded",
            "!ariadne-ring-0",
            "ariadne-cursor-pointer",
            SHARED_BACKGROUND_COLORS,
            options[:html_attrs][:class],
          ]

          Ariadne::UI::Link::Component.new(**options)
        }

        renders_many :items, BaseComponent::ACCEPT_ANYTHING

        accepts_html_attributes do |html_attrs|
          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style, html_attrs[:class]].join(" "))
          html_attrs[:data] = {
            controller: stimulus_name,
          }
        end

        style do
          base do
            [
              "ariadne-overflow-y-auto",
              "ariadne-grow",
            ]
          end

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

        style :items do
          base do
            [
              "ariadne-flex",
              "ariadne-flex-col",
              "ariadne-gap-1",
            ]
          end
        end

        SHARED_BACKGROUND_COLORS = [
          "hover:ariadne-bg-blue-100",
          "hover:dark:ariadne-bg-blue-800",
          "focus-within:ariadne-bg-blue-100",
          "focus-within:dark:ariadne-bg-blue-800",
        ]
        style :item do
          base do
            [
              # "ariadne-gap-0.5",
              "ariadne-items-center",
              "ariadne-rounded",
              "!ariadne-ring-0",
              "ariadne-cursor-default",
              "ariadne-select-none",
              "ariadne-items-center",
              "ariadne-rounded-sm",
              "ariadne-px-2",
              # "ariadne-py-1.5",
              "ariadne-text-sm",
              "ariadne-outline-none",
              "ariadne-transition-colors",
              "disabled:ariadne-pointer-events-none",
              "disabled:ariadne-opacity-50",
            ].concat(SHARED_BACKGROUND_COLORS)
          end
        end
      end
    end
  end
end