import React, { ReactNode } from "react";
import { SelectStatus } from "./SelectStatus";

interface SelectChildrenWithDefaultStatusProps {
  isLoading: boolean | undefined;
  inputValue: string | undefined;
  children: ReactNode;
}

export const SelectChildrenWithDefaultStatus = ({
  isLoading,
  inputValue,
  children,
}: SelectChildrenWithDefaultStatusProps) => {
  const childrenIsEmptyArray = Array.isArray(children) && children.length === 0;
  const showDefaultNoResults = inputValue && !isLoading && childrenIsEmptyArray;
  const showDefaultLoading = isLoading && childrenIsEmptyArray;

  if (showDefaultLoading) {
    return <SelectStatus>Loading...</SelectStatus>;
  }

  if (showDefaultNoResults) {
    return <SelectStatus>No matches found</SelectStatus>;
  }

  return <>{children}</>;
};