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

export default class extends Controller {
  static targets = [
    "monthlyPrice",
    "yearlyPrice",
    "monthlyText",
    "yearlyText",
    "saveBanner",
    "monthlyButton",
    "yearlyButton",
  ];

  connect() {
    // Set initial state
    this.togglePrices();
    this.setInitialAriaStates();
  }

  togglePrices(event) {
    let isMonthly;

    // If event exists, it means a button was clicked
    if (event) {
      isMonthly = event.currentTarget.dataset.pricingPeriod === "monthly";

      // Update button styles and ARIA states
      this.monthlyButtonTargets.forEach((target) => {
        target.classList.toggle("bg-white", isMonthly);
        target.classList.toggle("shadow-sm", isMonthly);
        target.classList.toggle("text-stone-900", isMonthly);
        target.classList.toggle("text-stone-500", !isMonthly);
        target.setAttribute("aria-selected", isMonthly.toString());
      });
      this.yearlyButtonTargets.forEach((target) => {
        target.classList.toggle("bg-white", !isMonthly);
        target.classList.toggle("shadow-sm", !isMonthly);
        target.classList.toggle("text-stone-900", !isMonthly);
        target.classList.toggle("text-stone-500", isMonthly);
        target.setAttribute("aria-selected", (!isMonthly).toString());
      });
    } else {
      // Initial state - check which button is active
      isMonthly = this.monthlyButtonTargets[0].classList.contains("bg-white");
    }

    // Toggle prices visibility
    this.monthlyPriceTargets.forEach((target) => {
      target.classList.toggle("hidden", !isMonthly);
    });
    this.yearlyPriceTargets.forEach((target) => {
      target.classList.toggle("hidden", isMonthly);
    });

    // Toggle text visibility
    this.monthlyTextTargets.forEach((target) => {
      target.classList.toggle("hidden", !isMonthly);
    });
    this.yearlyTextTargets.forEach((target) => {
      target.classList.toggle("hidden", isMonthly);
    });

    // Toggle savings banner visibility
    this.saveBannerTargets.forEach((target) => {
      target.classList.toggle("hidden", !isMonthly);
    });
  }

  setInitialAriaStates() {
    const isMonthly =
      this.monthlyButtonTargets[0].classList.contains("bg-white");
    this.monthlyButtonTargets.forEach((target) => {
      target.setAttribute("aria-selected", isMonthly.toString());
    });
    this.yearlyButtonTargets.forEach((target) => {
      target.setAttribute("aria-selected", (!isMonthly).toString());
    });
  }
}