import { FC } from 'react';

import Box from '@material-hu/mui/Box';
import CircularProgress from '@material-hu/mui/CircularProgress';

import NoResults from './NoResults';

export type ListProps = {
  // dejo sx con any xq al correr bun run tsc produce un error de memoria
  // e impide que se apruebe el CI
  sx?: any;
  isSuccess: boolean;
  isLoading?: boolean;
  isEmpty?: boolean;
  noResultsLabel?: string | React.ReactNode;
  showNoResultsMessage?: boolean;
  customLoader?: React.ReactNode;
  loadingSkeleton?: React.ReactNode;
};

export const List: FC<React.PropsWithChildren<ListProps>> = props => {
  const {
    isSuccess,
    isLoading = false,
    isEmpty = false,
    noResultsLabel,
    children,
    sx,
    showNoResultsMessage = true,
    loadingSkeleton = undefined,
    customLoader,
  } = props;

  return (
    <Box sx={sx}>
      {isLoading && !loadingSkeleton && (
        <Box
          sx={{
            textAlign: 'center',
            overflow: 'hidden !important',
          }}
        >
          {customLoader || <CircularProgress />}
        </Box>
      )}
      {isLoading && loadingSkeleton}
      {showNoResultsMessage && isSuccess && isEmpty && (
        <NoResults label={noResultsLabel} />
      )}
      {isSuccess && !isEmpty && <>{children}</>}
    </Box>
  );
};

export default List;