Alert Dialog

# frozen_string_literal: true

module RubyUI
	class AlertDialog < Base
		def initialize(open: false, **attrs)
			@open = open
			super(**attrs)
		end

		def view_template(&)
			div(**attrs, &)
		end

		private

		def default_attrs
			{
				data: {
					controller: "ruby-ui--alert-dialog",
					ruby_ui__alert_dialog_open_value: @open.to_s
				},
				class: "inline-block"
			}
		end
	end
end

# frozen_string_literal: true

module RubyUI
	class AlertDialogAction < Base
		def view_template(&)
			render RubyUI::Button.new(**attrs, &)
		end

		private

		def default_attrs
			{
				variant: :primary
			}
		end
	end
end

# frozen_string_literal: true

module RubyUI
	class AlertDialogCancel < Base
		def view_template(&)
			render RubyUI::Button.new(**attrs, &)
		end

		private

		def default_attrs
			{
				variant: :outline,
				data: {
					action: "click->ruby-ui--alert-dialog#dismiss"
				},
				class: "mt-2 sm:mt-0"
			}
		end
	end
end

# frozen_string_literal: true

module RubyUI
	class AlertDialogContent < Base
		def view_template(&block)
			template(**attrs) do
				div(data: {controller: "ruby-ui--alert-dialog"}) do
					background
					container(&block)
				end
			end
		end

		def background
			div(
				data_state: "open",
				class: "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in",
				style: "pointer-events:auto",
				data_aria_hidden: "true",
				aria_hidden: "true"
			)
		end

		def container(&)
			div(
				role: "alertdialog",
				data_state: "open",
				class: "flex flex-col fixed left-[50%] top-[50%] z-50 w-full max-w-lg max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:rounded-lg md:w-full",
				style: "pointer-events:auto",
				&
			)
		end

		private

		def default_attrs
			{
				data: {
					ruby_ui__alert_dialog_target: "content"
				}
			}
		end
	end
end

# frozen_string_literal: true

module RubyUI
	class AlertDialogDescription < Base
		def view_template(&)
			p(**attrs, &)
		end

		private

		def default_attrs
			{
				class: "text-sm text-muted-foreground"
			}
		end
	end
end

# frozen_string_literal: true

class Views::Docs::AlertDialog < Views::Base
	def view_template
		component = "AlertDialog"
		div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
			render Docs::Header.new(title: "Alert Dialog", description: "A modal dialog that interrupts the user with important content and expects a response.")

			Heading(level: 2) { "Usage" }
			render Docs::VisualCodeExample.new(title: "Example", context: self) do
				<<~RUBY
					AlertDialog do
						AlertDialogTrigger do
							Button { "Show dialog" }
						end
						AlertDialogContent do
							AlertDialogHeader do
								AlertDialogTitle { "Are you absolutely sure?" }
								AlertDialogDescription { "This action cannot be undone. This will permanently delete your account and remove your data from our servers." }
							end
							AlertDialogFooter do
								AlertDialogCancel { "Cancel" }
								AlertDialogAction { "Continue" } # Will probably be a link to a controller action (e.g. delete account)
							end
						end
					end
				RUBY
			end

			render Components::ComponentSetup::Tabs.new(component_name: component)

			render Docs::ComponentsTable.new(component_files(component))
		end
	end
end

# frozen_string_literal: true

module RubyUI
	class AlertDialogFooter < Base
		def view_template(&)
			div(**attrs, &)
		end

		private

		def default_attrs
			{
				class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 rtl:space-x-reverse"
			}
		end
	end
end

# frozen_string_literal: true

module RubyUI
	class AlertDialogHeader < Base
		def view_template(&)
			div(**attrs, &)
		end

		private

		def default_attrs
			{
				class: "flex flex-col space-y-2 text-center sm:text-left rtl:sm:text-right"
			}
		end
	end
end

# frozen_string_literal: true

module RubyUI
	class AlertDialogTitle < Base
		def view_template(&)
			h2(**attrs, &)
		end

		private

		def default_attrs
			{
				class: "text-lg font-semibold"
			}
		end
	end
end

# frozen_string_literal: true

module RubyUI
	class AlertDialogTrigger < Base
		def view_template(&)
			div(**attrs, &)
		end

		private

		def default_attrs
			{
				data: {action: "click->ruby-ui--alert-dialog#open"},
				class: "inline-block"
			}
		end
	end
end

import { Controller } from "@hotwired/stimulus";

// Connects to data-controller="ruby-ui--alert-dialog"
export default class extends Controller {
  static targets = ["content"];
  static values = {
    open: {
      type: Boolean,
      default: false,
    },
  };

  connect() {
    if (this.openValue) {
      this.open();
    }
  }

  open() {
    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
    // prevent scroll on body
    document.body.classList.add("overflow-hidden");
  }

  dismiss(e) {
    // allow scroll on body
    document.body.classList.remove("overflow-hidden");
    // remove the element
    this.element.remove();
  }
}

rake stimulus:manifest:update