import type {
  FieldItemProps,
  FormSelectProps,
} from "@/components/tanstack-form-utils";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useLocaleFunction } from "@/hooks/use-localed";
import {
  type CloudProvider,
  type ClusterRegions,
  flattenClusterRegions,
  toClusterRegionKey,
} from "@/lib/cluster-regions";
import { useMemo, useState } from "react";

export function ClusterRegionSelect({
  allowedValues,
  disabled,
  value,
  onValueChange,
  onOpenChange,
  className,
  ...props
}: FieldItemProps & FormSelectProps & { allowedValues: ClusterRegions }) {
  const [open, setOpen] = useState(false);

  const regions = useMemo(() => {
    return flattenClusterRegions(allowedValues);
  }, [allowedValues]);

  const t = useLocaleFunction();
  return (
    <Select
      open={open}
      value={value}
      onValueChange={onValueChange}
      onOpenChange={(open) => {
        setOpen(open);
        onOpenChange?.(open);
      }}
    >
      <SelectTrigger {...props} className={className} disabled={disabled}>
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        {regions.map((region) => (
          <SelectItem
            key={toClusterRegionKey(region)}
            value={toClusterRegionKey(region)}
          >
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              className="mr-2 inline-flex w-4"
              src={logoSrcMap[region.cloud_provider]}
              alt={`${t(`lab.meta.cloud-provider:${region.cloud_provider}`)} Logo`}
            />
            {t(`lab.meta.region:${region.region_name}`)}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}

export const logoSrcMap: Record<CloudProvider, string> = {
  aws: `${process.env.NEXT_PUBLIC_ASSET_PREFIX}/aws.svg`,
  alicloud: `${process.env.NEXT_PUBLIC_ASSET_PREFIX}/alicloud.svg`,
};