Tabs

# frozen_string_literal: true

module RubyUI
	class Tabs < Base
		def initialize(default: nil, **attrs)
			@default = default
			super(**attrs)
		end

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

		private

		def default_attrs
			{
				data: {
					controller: "ruby-ui--tabs",
					ruby_ui__tabs_active_value: @default
				}
			}
		end
	end
end

# frozen_string_literal: true

module RubyUI
	class TabsContent < Base
		def initialize(value:, **attrs)
			@value = value
			super(**attrs)
		end

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

		private

		def default_attrs
			{
				data: {
					ruby_ui__tabs_target: :content,
					value: @value
				},
				class: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hidden"
			}
		end
	end
end

# frozen_string_literal: true

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

		private

		def default_attrs
			{
				class: "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground"
			}
		end
	end
end

# frozen_string_literal: true

module RubyUI
	class TabsTrigger < Base
		def initialize(value:, **attrs)
			@value = value
			super(**attrs)
		end

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

		private

		def default_attrs
			{
				type: :button,
				data: {
					ruby_ui__tabs_target: "trigger",
					action: "click->ruby-ui--tabs#show",
					value: @value
				},
				class: "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow"
			}
		end
	end
end

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

// Connects to data-controller="ruby-ui--tabs"
export default class extends Controller {
  static targets = ["trigger", "content"];
  static values = { active: String };

  connect() {
    if (!this.hasActiveValue && this.triggerTargets.length > 0) {
      this.activeValue = this.triggerTargets[0].dataset.value;
    }
  }

  show(e) {
    this.activeValue = e.currentTarget.dataset.value;
  }

  activeValueChanged(currentValue, previousValue) {
    if (currentValue == "" || currentValue == previousValue) return;

    this.contentTargets.forEach((el) => {
      el.classList.add("hidden");
    });

    this.triggerTargets.forEach((el) => {
      el.dataset.state = "inactive";
    });

    this.activeContentTarget() &&
      this.activeContentTarget().classList.remove("hidden");
    this.activeTriggerTarget().dataset.state = "active";
  }

  activeTriggerTarget() {
    return this.triggerTargets.find(
      (el) => el.dataset.value == this.activeValue,
    );
  }

  activeContentTarget() {
    return this.contentTargets.find(
      (el) => el.dataset.value == this.activeValue,
    );
  }
}

rake stimulus:manifest:update