"use client";

import { useState, type ReactNode } from "react";
import { SlidersHorizontalIcon } from "lucide-react";

import { useTranslation } from "@/hooks/useTranslation";
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import { Typography } from "@/components/ui/typography";

import { CalendarViewSwitcher } from "./calendar-view-switcher";
import type { CalendarView } from "./types";

interface CalendarControlsSheetProps {
  view: CalendarView;
  views: CalendarView[];
  onViewChange: (view: CalendarView) => void;
  /** Screen-specific filter controls (rendered stacked, full-width). */
  filters?: ReactNode;
}

/**
 * Mobile-only collapse of the toolbar controls: a single button that opens a
 * Sheet from the reading-end side holding the view switcher plus every filter.
 * Keeps the phone toolbar to just navigation, and gives filters room to grow.
 */
export function CalendarControlsSheet({
  view,
  views,
  onViewChange,
  filters,
}: CalendarControlsSheetProps) {
  const { t, isRTL } = useTranslation();
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button
        type="button"
        variant="secondary"
        size="icon"
        aria-label={t("calendar.options")}
        onClick={() => setOpen(true)}
      >
        <SlidersHorizontalIcon className="size-4" />
      </Button>

      <Sheet open={open} onOpenChange={setOpen}>
        {/* Sheet only supports physical sides; open from the reading-end side. */}
        <SheetContent side={isRTL ? "left" : "right"}>
          <SheetHeader>
            <SheetTitle>{t("calendar.options")}</SheetTitle>
          </SheetHeader>

          <div className="flex flex-col gap-5 p-4">
            {views.length > 1 && (
              <div className="flex flex-col gap-2">
                <Typography as="span" variant="caption" color="secondary">
                  {t("calendar.viewLabel")}
                </Typography>
                <CalendarViewSwitcher
                  value={view}
                  views={views}
                  onChange={onViewChange}
                  fullWidth
                />
              </div>
            )}
            {filters}
          </div>
        </SheetContent>
      </Sheet>
    </>
  );
}