import type {
  FieldItemProps,
  FormSelectProps,
} from "@/components/tanstack-form-utils";
import {
  Command,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { useLocale, useLocaleFunction } from "@/hooks/use-localed";
import type { Locale } from "@/lib/locale";
import { getRegionName, useRegions } from "@/lib/regions";
import { cn } from "@/lib/utils";
import { CheckIcon, ChevronDown } from "lucide-react";
import { useMemo, useState } from "react";

export function RegionSelect({
  allowedValues,
  disabled,
  value,
  onValueChange,
  onOpenChange,
  className,
  localeOverrides,
  ...props
}: FieldItemProps &
  FormSelectProps & {
    allowedValues?: string[];
    localeOverrides?: Record<string, Record<Locale, string>>;
  }) {
  const [open, setOpen] = useState(false);
  const regions = useRegions();
  const locale = useLocale();
  const t = useLocaleFunction();

  const items = useMemo(
    () =>
      allowedValues
        ? regions.filter(([code]) => allowedValues.includes(code))
        : regions,
    [allowedValues, regions]
  );

  const getName = (code: string, name: string) => {
    return localeOverrides?.[code]?.[locale] ?? name;
  };

  return (
    <Popover
      open={open}
      onOpenChange={(open) => {
        setOpen(open);
        onOpenChange?.(open);
      }}
    >
      <PopoverTrigger
        {...props}
        className={cn(
          "flex h-9 w-full items-center justify-between whitespace-nowrap border border-input bg-transparent px-3 py-2 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
          className
        )}
        disabled={disabled}
      >
        {value ? (
          getName(value, getRegionName(value, locale) ?? "")
        ) : (
          <span className="text-muted" />
        )}
        <ChevronDown className="ml-auto h-4 w-4 opacity-50" />
      </PopoverTrigger>
      <PopoverContent
        className="p-0"
        align="start"
        style={{ width: `var(--radix-popper-anchor-width)` }}
      >
        <Command>
          <CommandInput placeholder={t("profile.form.region-search")} />
          <CommandList>
            <CommandGroup>
              {items.map(([code, name]) => (
                <CommandItem
                  key={code}
                  value={code}
                  keywords={[code, name]}
                  onSelect={(currentValue) => {
                    onValueChange?.(currentValue);
                    setOpen(false);
                  }}
                >
                  {getName(code, name)}
                  <CheckIcon
                    className={cn(
                      "ml-auto",
                      value === code ? "opacity-100" : "opacity-0"
                    )}
                  />
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}