"use client";

import {
  cn,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@common/components";

import { useCodeList, useCodeListByUseYn } from "../api/queries";

interface CodeSelectProps extends React.ComponentPropsWithoutRef<typeof Select> {
  upCd: string;
  useYn?: string;
  placeholder?: string;
  className?: string;
}

function CodeSelect({ upCd, useYn, placeholder = "선택", className, ...props }: CodeSelectProps) {
  const listQuery = useCodeList(useYn ? undefined : upCd);
  const listByUseYnQuery = useCodeListByUseYn(useYn ? upCd : undefined, useYn ?? "");

  const codes = useYn ? listByUseYnQuery.data : listQuery.data;
  const isLoading = useYn ? listByUseYnQuery.isPending : listQuery.isPending;

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

export { CodeSelect };