import React from 'react';

import type { SkeletonListProps } from '../../../../types/skeleton';
import { List, type ListItemProps } from '../../../list/public';
import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
import { Skeleton } from './Skeleton';
import { SkeletonText } from './SkeletonText';

function clampRows(rows: number): number {
  if (!Number.isFinite(rows)) {
    return 1;
  }

  return Math.max(1, Math.floor(rows));
}

function renderLeading({ avatar, media }: Pick<SkeletonListProps, 'avatar' | 'media'>) {
  if (media) {
    return <Skeleton height={64} radius="m" width={64} />;
  }

  if (avatar) {
    return <Skeleton height={40} radius="full" width={40} />;
  }

  return undefined;
}

function SkeletonListInner({
  themeId: _themeId,
  mode: _mode,
  testID,
  rows = 5,
  avatar = false,
  media = false,
  lines = 2,
  variant = 'divider',
  compact = false,
}: SkeletonListProps) {
  const rowCount = clampRows(rows);
  const items: ListItemProps[] = Array.from({ length: rowCount }).map(() => ({
    compact,
    description: <SkeletonText lines={lines} />,
    leading: renderLeading({ avatar, media }),
    title: <Skeleton height={16} radius="full" width="48%" />,
    variant,
  }));

  return <List compact={compact} items={items} itemVariant={variant} testID={testID} />;
}

/***
 * Skeleton placeholder list for loading states in list views.
 *
 
 */
export const SkeletonList = withZoraThemeScope(SkeletonListInner);