import { useQuery } from "@tanstack/react-query";
import {
  cn,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@common/components";
import { ENDPOINT } from "@/shared/config";
import { CodeApi } from "../api/code-service";

type CodeSelectProps = {
  upCd: string;
  placeholder?: string;
  className?: string;
} & React.ComponentPropsWithoutRef<typeof Select>;

function CodeSelect({
  upCd,
  placeholder = "선택",
  className,
  ...props
}: CodeSelectProps) {
  const { data: code } = useQuery({
    queryKey: [ENDPOINT.CMS_SERVICE.CODE, upCd],
    queryFn: () => CodeApi.getCode(upCd),
    enabled: !!upCd,
  });

  return (
    <Select {...props}>
      <SelectTrigger className={cn("w-[12rem]", className)}>
        <SelectValue placeholder={placeholder} />
      </SelectTrigger>
      <SelectContent>
        {code?.map((item) => (
          <SelectItem key={item.lwpoCd} value={item.lwpoCd}>
            {item.lwpoCdNm}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}

export { CodeSelect };