import { FC } from 'react';

import MaterialList, {
  ListProps as MaterialListProps,
} from '@material-hu/mui/List';

import HuCircularProgress from '@material-hu/components/design-system/ProgressIndicators/Spinner';

import NoResults, { NoResultsProps } from './NoResults';

export type ListProps = {
  sx?: MaterialListProps['sx'];
  isSuccess: boolean;
  isLoading?: boolean;
  isEmpty?: boolean;
  noResultsLabel?: string | React.ReactNode;
  loadingFallback?: React.ReactNode;
  noResultsProps?: Omit<NoResultsProps, 'label'>;
};

export const List: FC<React.PropsWithChildren<ListProps>> = props => {
  const {
    isSuccess,
    isLoading = false,
    isEmpty = false,
    noResultsLabel,
    children,
    sx,
    loadingFallback,
    noResultsProps,
  } = props;

  return (
    <MaterialList sx={sx}>
      {isLoading && (loadingFallback || <HuCircularProgress centered />)}
      {isSuccess && isEmpty && (
        <NoResults
          label={noResultsLabel}
          {...noResultsProps}
        />
      )}
      {isSuccess && !isEmpty && children}
    </MaterialList>
  );
};

export default List;