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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
				style: "pointer-events:auto",
				data_aria_hidden: "true",
				aria_hidden: "true"
			)
		end

		def container(&)
			div(
				role: "alertdialog",
				data_state: "open",
				class: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] 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

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"
			}
		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"
			}
		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