sd-comp

import { useState, useEffect, useRef } from "react";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Button } from "../ui/button";
import { Calendar } from "../ui/calendar";
import moment from "moment";
import { cn } from "@/lib/utils";
import { CalendarDays } from "lucide-react";

export const SelectDate = ({
  selected,
  className,
  onSelect,
  disabled,
  disableClick,
  placeholder = "Select a date",
  autoFocus,
}: {
  selected?: any;
  className?: string;
  onSelect: (date: string | undefined) => void;
  disabled?: any;
  placeholder?: string;
  disableClick?: boolean;
  autoFocus?: boolean;
}) => {
  const [open, setOpen] = useState(false);
  const buttonRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    if (autoFocus && buttonRef.current && !disableClick) {
      const timer = setTimeout(() => {
        buttonRef.current?.focus();
      }, 150);
      return () => clearTimeout(timer);
    }
  }, [autoFocus, disableClick]);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          ref={buttonRef}
          disabled={disableClick}
          className={cn(
            "hover:bg-custom-gray-bg-1 focus:border-custom-blue-border-1!  w-full justify-between text-left font-medium bg-custom-gray-bg-1 border border-custom-gray-border-1 outline-none focus:ring-2 cursor-pointer focus:ring-custom-blue-focusring! text-custom-gray-text-1  transition-all placeholder:text-custom-gray-text-1 ",
            {
              "text-custom-gray-text-1": !selected,
            },
            className,
          )}
        >
          {selected ? moment(selected).format("DD/MM/YYYY") : placeholder}
          <CalendarDays size={14} />
        </Button>
      </PopoverTrigger>
      <PopoverContent
        className="pointer-events-auto z-10000 w-auto overflow-hidden p-0"
        align="start"
      >
        <Calendar
          mode="single"
          selected={selected ? new Date(selected) : undefined}
          onSelect={(date) => {
            onSelect(date ? moment(date).format("YYYY-MM-DD") : undefined);
            setOpen(false);
          }}
          disabled={disabled}
          captionLayout="dropdown"
          startMonth={new Date(1900, 0)}
          endMonth={new Date(new Date().getFullYear() + 10, 11)}
        />
      </PopoverContent>
    </Popover>
  );
};