# frozen_string_literal: true

module Ariadne
  # Add a general description of component here
  # Add additional usage considerations or best practices that may aid the user to use the component correctly.
  # @accessibility Add any accessibility considerations
  class SlideoverComponent < Ariadne::Component
    DEFAULT_TAG = :div
    TAG_OPTIONS = [DEFAULT_TAG].freeze

    DIRECTION_Y_DOWN = :yd
    DIRECTION_X_LEFT = :xl
    VALID_DIRECTIONS = [DIRECTION_Y_DOWN, DIRECTION_X_LEFT].freeze

    DEFAULT_CLASSES = ""

    DEFAULT_BUTTON_CLASSES = "inline-flex items-center shadow-sm px-4 py-1.5 pb-2 text-sm leading-5 font-medium rounded-full " + Ariadne::ButtonComponent::SCHEME_CLASS_MAPPINGS[:default]
    renders_one :open_button, lambda { |label:, classes: "", attributes: {}, text_classes: ""|
      actual_classes = class_names(DEFAULT_BUTTON_CLASSES, classes)

      attributes[:id] ||= "btnOpen"
      attributes[:"data-slideover-component-target"] ||= "slidePanel"
      attributes[:"data-action"] ||= "click->slideover-component#toggle"
      attributes[:type] ||= "submit"

      icon = case @direction
      when DIRECTION_Y_DOWN
        :"chevron-double-down"
      end

      render(Ariadne::BaseComponent.new(tag: :button, classes: actual_classes, attributes: attributes)) do
        render(Ariadne::HeroiconComponent.new(icon: icon, size: :sm, variant: HeroiconsHelper::Icon::VARIANT_SOLID, attributes: { "data-slideover-component-target" => "slide-panel" }, text_classes: text_classes)) { label }
      end
    }

    renders_one :close_button, lambda { |label:, classes: "", attributes: {}, text_classes: ""|
      actual_classes = class_names(DEFAULT_BUTTON_CLASSES, classes)

      attributes[:id] ||= "btnClose"
      attributes[:"data-slideover-component-target"] ||= "slidePanel"
      attributes[:"data-action"] ||= "click->slideover-component#toggle"
      attributes[:type] ||= "submit"

      icon = case @direction
      when DIRECTION_Y_DOWN
        :"chevron-double-up"
      end

      render(Ariadne::BaseComponent.new(tag: :button, classes: actual_classes, attributes: attributes)) do
        render(Ariadne::HeroiconComponent.new(icon: icon, size: :sm, variant: HeroiconsHelper::Icon::VARIANT_SOLID, attributes: { "data-slideover-component-target" => "slide-panel" }, text_classes: text_classes)) { label }
      end
    }

    # @example Default
    #
    #   <%= render(Ariadne::SlideoverComponent.new(direction: Ariadne::SlideoverComponent::DIRECTION_Y_DOWN)) { "Example" } %>
    #
    # @param tag [Symbol, String] The rendered tag name.
    # @param direction [Symbol] <%= one_of(Ariadne::SlideoverComponent::VALID_DIRECTIONS) %>
    # @param form_id [String] The ID of any <form> tag to submit when the button is clicked.
    # @param open_text [String] The text to use to open the slideover.
    # @param close_text [String] The text to use to close the slideover.
    # @param classes [String] <%= link_to_classes_docs %>
    # @param attributes [Hash] <%= link_to_attributes_docs %>
    def initialize(tag: DEFAULT_TAG, direction:, form_id: nil, open_text: "Open", close_text: "Close", classes: "", attributes: {})
      @tag = check_incoming_tag(DEFAULT_TAG, tag)
      @classes = class_names(
        DEFAULT_CLASSES,
        classes
      )

      @direction = fetch_or_raise(VALID_DIRECTIONS, direction)
      @form_id = form_id

      @open_text = open_text
      @close_text = close_text
      @attributes = attributes
      @attributes[:"data-controller"] = "slideover-component"
    end
  end
end