module UltimateTurboModal::Flavors
  class Tailwind < UltimateTurboModal::Base
    private

    def modal(&)
      div_dialog do
        div_overlay
        div_outer do
          div_inner do
            div_border do
              button_close if close_button?
              yield
            end
          end
        end
      end
    end

    def div_dialog(&)
      div(id: "modal-container",
        class: "relative z-10",
        role: "dialog",
        aria: {
          labeled_by: "modal-title",
          modal: true
        },
        data: {
          controller: "modal",
          modal_target: "container",
          modal_advance_url_value: advance_url,
          action: "turbo:submit-end->modal#submitEnd keyup@window->modal#closeWithKeyboard click@window->modal#outsideModalClicked click->modal#outsideModalClicked",
          transition_enter: "ease-out duration-300",
          transition_enter_start: "opacity-0",
          transition_enter_end: "opacity-100",
          transition_leave: "ease-in duration-200",
          transition_leave_start: "opacity-100",
          transition_leave_end: "opacity-0"
        }, &)
    end

    def div_overlay(&)
      div(id: "modal-overlay",
        class: "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity",
        data: {
          modal_target: "overlay",
          action: "click->modal#outsideModalClicked"
        })
    end

    def div_outer(&)
      div(id: "modal-outer",
        class: "fixed inset-0 z-10 overflow-y-auto sm:max-w-[80%] md:max-w-3xl sm:mx-auto m-4",
        data: {
          modal_target: "modal"
        }, &)
    end

    def div_inner(&)
      div(id: "modal-inner",
        class: "flex min-h-full items-center justify-center p-1 sm:p-4",
        data: {
          modal_target: "innerModal"
        }, &)
    end

    def div_border(&)
      klass = "relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:max-w-3xl"
      klass = "#{klass} p-2 sm:p-4 md:p-6" if @padding == true
      klass = "#{klass} #{@padding}" if @padding.is_a?(String)
      div(id: "modal-border", class: klass, &)
    end

    def button_close(&)
      div(class: "absolute top-3 right-3") do
        button(type: "button",
          aria: {label: "close"},
          class: "ml-auto inline-flex items-center rounded bg-transparent p-1 text-sm text-gray-400 bg-white bg-opacity-20 hover:bg-gray-100 hover:bg-opacity-70 hover:text-gray-900",
          data: {
            action: "modal#hideModal"
          }) { icon_close }
      end
    end

    def icon_close
      svg(
        xmlns: "http://www.w3.org/2000/svg",
        fill: "none",
        viewbox: "0 0 24 24",
        stroke_width: "1.5",
        stroke: "currentColor",
        class: "w-5 h-5"
      ) do |s|
        s.path(
          stroke_linecap: "round",
          stroke_linejoin: "round",
          d: "M6 18L18 6M6 6l12 12"
        )
      end
    end
  end
end