import { forwardRef } from "react";
import { parseYyyymmdd } from "./dateRange.js";
import "./DayTabs.scss";

export interface DayTabButtonProps {
  date: string;
  isActive: boolean;
  isDisabled: boolean;
  locale: string;
  onClick: (date: string) => void;
}

export const DayTabButton = forwardRef<HTMLButtonElement, DayTabButtonProps>(
  ({ date, isActive, isDisabled, locale, onClick }, ref) => {
    const d = parseYyyymmdd(date);
    // Single format call keeps Russian month in the correct genitive
    // case ('19 апреля' rather than '19 апрель'), matching Angular's
    // ngx-translate output.
    const label = new Intl.DateTimeFormat(locale, {
      day: "numeric",
      month: isActive ? "long" : "short",
    }).format(d);

    const classes = [
      "day-tab",
      isActive ? "day-tab--active" : "",
      isDisabled ? "day-tab--disabled" : "",
    ]
      .filter(Boolean)
      .join(" ");

    return (
      <button
        ref={ref}
        type="button"
        className={classes}
        disabled={isDisabled}
        aria-pressed={isActive}
        aria-current={isActive ? "date" : undefined}
        data-testid={`day-tab-${date}`}
        onClick={() => {
          if (!isDisabled) onClick(date);
        }}
      >
        <span className="day-tab__label">{label}</span>
      </button>
    );
  },
);
DayTabButton.displayName = "DayTabButton";
