"use client";

import { useRouter } from "next/navigation";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Field, FieldLabel } from "@/components/ui/field";
import type { DiscordVoiceChannel } from "@/lib/leaderboard/discord";

const ALL_CHANNELS = "all";

export function ChannelSelect({
  channels,
  selectedChannelId,
  searchQuery,
}: {
  channels: DiscordVoiceChannel[];
  selectedChannelId?: string;
  searchQuery?: string;
}) {
  const router = useRouter();

  return (
    <Field className="max-w-md">
      <FieldLabel htmlFor="voice-channel">ห้องเสียง</FieldLabel>
      <Select
        value={selectedChannelId ?? ALL_CHANNELS}
        onValueChange={(value) => {
          const params = new URLSearchParams();
          if (value !== ALL_CHANNELS) params.set("channel", value);
          if (searchQuery) params.set("q", searchQuery);
          const query = params.toString();
          router.push(query ? `/leaderboard/vc?${query}` : "/leaderboard/vc");
        }}
      >
      <SelectTrigger id="voice-channel" className="w-full bg-card!">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectItem value={ALL_CHANNELS}>ทุกห้องเสียงปัจจุบัน</SelectItem>
            {channels.map((channel) => (
              <SelectItem key={channel.id} value={channel.id}>
                {channel.type === 13 ? "เวที: " : ""}
                {channel.name}
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>
    </Field>
  );
}