# frozen_string_literal: true

module Ariadne
  module Behaviors
    module Tooltipable
      def with_tooltip(text, **options)
        @tooltip_id = Generate.id

        html_attrs.merge!(
          "data-ariadne-tooltip-target" => "activator",
          "aria-describedby" => @tooltip_id,
        )

        prepend_action(html_attrs, tooltip_action)

        # TODO: this should raise if component's tag isn't an ARIA-compatible tag
        # ('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])')
        Ariadne::Behaviors::Tooltip.new(id: @tooltip_id, text: text, component: self, **options)
      end

      def tooltip_action
        "mouseover->ariadne-tooltip#showTooltip mouseout->ariadne-tooltip#hideTooltip"
      end
    end

    class Tooltip < Ariadne::BaseComponent
      option :id
      option :text
      option :component
      option :size, default: -> { :sm }

      erb_template <<~ERB
        <template data-controller="ariadne-tooltip",>
          <%= render(component) { content } %>
          <div class="<%= style(:tooltip_wrapper) %>" data-ariadne-tooltip-target="wrapper">
            <div id="<%= id %>" class="<%= style(size:) %>" data-ariadne-tooltip-target="tooltip">
              <div class="<%= style(:arrow) %>" class=arrow data-ariadne-tooltip-target="arrow"></div>
              <div class="<%= style(:text) %>"><%= text %></div>
            </div>
          </div>
        </template>
      ERB

      style do
        base do
          [
            "ariadne-absolute",
            "ariadne-w-max",
            "ariadne-z-20",
            "ariadne-isolate",
            "ariadne-flex",
            "ariadne-flex-col",
            "ariadne-gap-0.5",
            "ariadne-p-2",
            "ariadne-text-center",
            "ariadne-rounded-lg",
            "ariadne-bg-zinc-950",
            "dark:ariadne-bg-zinc-100",
            "ariadne-shadow-lg",
            "dark:ariadne-shadow-zinc-100/50",
          ]
        end

        variants do
          size do
            # w-36
            sm { "ariadne-max-w-[min(144px,90vw)]" }
            # w-52
            md { "ariadne-max-w-[min(208px,90vw)]" }
            # w-96
            lg { "ariadne-max-w-[min(384px,90vw)]" }
          end
        end
      end

      style :tooltip_wrapper do
        base do
          "ariadne-hidden"
        end
      end

      style :arrow do
        base do
          [
            "ariadne-absolute",
            "ariadne-z-10",
            "ariadne-w-2",
            "ariadne-h-2",
            "ariadne-rounded-tl-sm",
            "ariadne-rotate-45",
            "ariadne-bg-zinc-950",
            "dark:ariadne-bg-zinc-50",
            "ariadne-shadow-lg",
            "dark:ariadne-shadow-zinc-50",
          ]
        end
      end

      style :text do
        base do
          [
            "ariadne-text-sm",
            "ariadne-text-zinc-50",
            "dark:ariadne-text-zinc-900",
          ]
        end
      end

      style :action_text do
        base do
          [
            "ariadne-xs-md",
            "ariadne-text-zinc-400",
            "dark:ariadne-text-zinc-600",
          ]
        end
      end
    end
  end
end