# typed: false
# frozen_string_literal: true

module Ariadne
  module UI
    module Button
      class Component < Ariadne::BaseComponent
        include Ariadne::Behaviors::Tooltipable

        option :as, default: proc { :button }
        option :href, default: proc { nil }

        option :type, default: proc { "button" }
        option :state, default: proc { "" }
        option :theme, default: proc { :primary }
        option :size, default: proc { :base }
        option :icon_only, default: proc { :no }
        option :width, default: proc { :narrow }

        renders_one :leading_visual_icon, lambda { |**attrs|
          Ariadne::UI::Heroicon::Component.new(**attrs)
        }

        accepts_html_attributes do |html_attrs|
          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(theme:, size:, icon_only:, width:), html_attrs[:class]].join(" "))

          if link?
            html_attrs[:href] = href
            html_attrs.delete(:disabled)
          else
            html_attrs[:type] = type
            html_attrs[:disabled] ||= false
          end
        end

        style do
          base do
            [
              "ariadne-inline-flex",
              "ariadne-items-center",
              "ariadne-justify-center",
              "ariadne-gap-x-1.5",
              "ariadne-rounded",
              "ariadne-px-2",
              "ariadne-py-1",
              "ariadne-font-semibold",
              "ariadne-shadow-sm",
              "ariadne-text-black",
              "focus-visible:ariadne-outline",
              "focus-visible:ariadne-outline-2",
              "focus-visible:ariadne-outline-offset-2",

              "disabled:ariadne-border-transparent",
              "disabled:ariadne-cursor-not-allowed",
            ]
          end

          variants do
            theme do
              primary do
                [
                  "ariadne-text-white",

                  "ariadne-bg-emerald-600",
                  "hover:ariadne-bg-emerald-700",
                  "active:ariadne-bg-emerald-800",

                  "disabled:ariadne-bg-emerald-100",
                  "disabled:ariadne-text-emerald-400",
                  "disabled:dark:ariadne-bg-emerald-900",
                  "disabled:dark:ariadne-text-emerald-600",
                ]
              end
              secondary do
                [
                  "ariadne-text-black",

                  "ariadne-bg-zinc-100",
                  "hover:ariadne-bg-zinc-300/20",
                  "active:ariadne-bg-zinc-200/80",

                  "dark:ariadne-text-slate-100",
                  "dark:ariadne-bg-zinc-900",
                  "dark:ariadne-hover:bg-zinc-800/80",
                  "dark:active:ariadne-bg-zinc-700/20",
                ]
              end
              ghost do
                [
                  "ariadne-text-black",
                  "dark:ariadne-text-white",
                  "ariadne-shadow-none",

                  "hover:ariadne-bg-zinc-200/20",
                  "active:ariadne-bg-zinc-500/10",
                  "active:ariadne-border-transparent",
                  "dark:hover:ariadne-bg-zinc-600/20",
                  "dark:active:ariadne-bg-zinc-500/10",
                ]
              end
              danger do
                [
                  "ariadne-border",
                  "ariadne-border-solid",
                  "ariadne-border-red-600",
                  "ariadne-bg-transparent",
                  "ariadne-text-red-600",
                  "hover:ariadne-bg-red-500",
                  "hover:ariadne-text-white",
                  "active:ariadne-text-white",
                  "active:ariadne-bg-red-600",
                  "dark:active:ariadne-bg-red-400",
                ]
              end
            end

            size do
              xs do
                [
                  "ariadne-text-xs",
                ]
              end
              sm do
                [
                  "ariadne-text-sm",
                  "ariadne-leading-5",
                ]
              end
              base do
                [
                  "ariadne-rounded-md",
                  "ariadne-px-2.5",
                  "ariadne-py-1.5",
                  "ariadne-text-base",
                  "ariadne-leading-7",
                ]
              end
              lg do
                [
                  "ariadne-rounded-md",
                  "ariadne-px-3",
                  "ariadne-py-2",
                  "ariadne-text-lg",
                  "ariadne-leading-8",
                ]
              end
              xl do
                [
                  "ariadne-rounded-md",
                  "ariadne-px-3.5",
                  "ariadne-py-2.5",
                  "ariadne-text-xl",
                  "ariadne-leading-10",
                ]
              end
            end

            icon_only do
              yes {}
              no {}
            end
            width do
              narrow {}
              full { "ariadne-w-full ariadne-justify-between" }
            end
          end
        end

        private

        def button_tag
          if link?
            "a"
          else
            "button"
          end
        end

        def link? = as == :link
        def button? = as == :button
      end
    end
  end
end