# frozen_string_literal: true

module Ariadne
  # Displays content in a box that hovers over other content
  class PopoverComponent < Ariadne::Component
    DEFAULT_TAG = :div
    TAG_OPTIONS = [DEFAULT_TAG].freeze

    DIRECTIONS = [:top, :right, :bottom, :left]

    # Menu: List of selectable items (ie: navigation)
    # Dialog: Essentiall a modal
    # Listbox: Something like a dropdown for a <select> element
    # Tooltip: plain text
    ROLES = [:menu, :dialog, :listbox, :tooltip]
    HORIZONTAL_ALIGNMENTS = [:left, :right, :center]

    DEFAULT_CLASSES = {
      wrapper: "ariadne-group ariadne-relative ariadne-w-fit",
      items: "ariadne-w-fit ariadne-absolute ariadne-shadow-lg ariadne-z-10 ariadne-p-2 ariadne-bg-white ariadne-rounded-md",
      base: "ariadne-inline-block",
    }

    ITEMS_DIRECITON_CLASSES = "group-data-[popover-direction=top]:ariadne-bottom-full group-data-[popover-direction=top]:-ariadne-translate-y-2 group-data-[popover-direction=bottom]:ariadne-top-full group-data-[popover-direction=bottom]:ariadne-translate-y-2"
    ITEMS_HORIZONTAL_ALIGNMENT_CLASSES = "group-data-[popover-horizontal-alignment=left]:ariadne-left-0 group-data-[popover-horizontal-alignment=right]:ariadne-right-0 group-data-[popover-horizontal-alignment=center]:ariadne-left-1/2 group-data-[popover-horizontal-alignment=center]:-ariadne-translate-x-1/2"
    ITEMS_VISIBILITY_CLASSES = "group-data-[popover-visible=false]:ariadne-hidden"

    DEFAULT_ATTRIBUTES = {
      "data-controller": "toggleable",
      "data-action": "click->toggleable#toggle",
      "data-toggleable-synced-attrs-value": '["data-popover-visible"]',
    }

    renders_one :base

    renders_many :items

    # @example Default
    #
    #   <%= render(Ariadne::PopoverComponent.new) { "Example" } %>
    #
    # @param tag [Symbol, String] The rendered tag name.
    # @param classes [String] <%= link_to_classes_docs %>
    # @param attributes [Hash] <%= link_to_attributes_docs %>
    def initialize(
      tag: DEFAULT_TAG,
      direction: :bottom,
      classes: "",
      role:,
      attributes: {},
      horizontal_alignment: :center,
      initial_visible: false,
      base_wrapper_classes: "",
      items_wrapper_classes: ""
    )
      @tag = check_incoming_tag(DEFAULT_TAG, tag)
      @direction = fetch_or_raise(DIRECTIONS, direction)
      @horizontal_alignment = fetch_or_raise(HORIZONTAL_ALIGNMENTS, horizontal_alignment)
      @role = fetch_or_raise(ROLES, role)
      @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)

      @attributes = DEFAULT_ATTRIBUTES
        .merge({
          "data-popover-direction": @direction,
          "data-popover-horizontal-alignment": @horizontal_alignment,
          "data-popover-visible": initial_visible,
          "data-toggleable-close-on-outside-click-value": true,
        })
        .merge(attributes)

      @base_classes = merge_class_names(DEFAULT_CLASSES[:base], base_wrapper_classes)
      @items_wrapper_classes = merge_class_names(
        DEFAULT_CLASSES[:items],
        ITEMS_DIRECITON_CLASSES,
        ITEMS_HORIZONTAL_ALIGNMENT_CLASSES,
        ITEMS_VISIBILITY_CLASSES,
        items_wrapper_classes,
      )
    end
  end
end