import React from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {Skeleton} from '@components/_HuGo/Skeleton';
import {Divider} from '@components/_HuGo/Divider';
import {useTheme} from '@shared/theme';

import {ListPresentation} from '../../interfaces';
import {ListItemSkeleton} from '../ListItemSkeleton';
import {styles} from './styles';

const DEFAULT_SKELETON_ITEM_LENGTH = 10;

interface Props {
  presentation: ListPresentation;
  style?: StyleProp<ViewStyle>;
  withDescription?: boolean;
  withDivider?: boolean;
  itemLength?: number;
}

export function ListSkeleton({
  presentation,
  style,
  withDescription = true,
  withDivider = true,
  itemLength = DEFAULT_SKELETON_ITEM_LENGTH,
}: Props) {
  const {theme} = useTheme();
  const array = new Array(itemLength).fill(null);

  return (
    <Skeleton
      style={[
        styles.container,
        presentation === 'card' && [
          {
            backgroundColor: theme.background.layout.tertiary,
            borderColor: theme.border.neutral.default,
          },
          styles.cardContainer,
        ],
        style,
      ]}>
      {array.map((_, index) => (
        <View key={index}>
          <ListItemSkeleton withDescription={withDescription} />
          {withDivider && index < itemLength - 1 && <Divider />}
        </View>
      ))}
    </Skeleton>
  );
}
