import React, {ReactElement, ReactNode} from 'react';
import {ListRenderItem} from 'react-native';
import {List} from '@components';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {ButtonCreateGoalFooter} from '@modules/goals/components';
import {GoalsListSK} from '@modules/goals/skeletons/GoalsListSK';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface GoalsListLayoutProps<T> {
  renderItem: ListRenderItem<T>;
  data?: T[];
  keyExtractor?: (item: T) => string;
  hasNextPage?: boolean;
  getNextPage?: () => void;
  refreshList?: () => void;
  isFetchingNextPage?: boolean;
  isRefreshing?: boolean;
  titleEmptyList: string;
  descriptionEmptyList: string;
  IconEmptyList: ReactNode;
  isLoading?: boolean;
  isError?: boolean;
  ListHeaderComponent?: ReactElement;
  ownerId?: number;
  cycleId?: number;
}

function GoalsListLayout<T>({
  renderItem,
  data,
  keyExtractor,
  hasNextPage,
  getNextPage,
  refreshList,
  isFetchingNextPage,
  isRefreshing,
  titleEmptyList,
  descriptionEmptyList,
  IconEmptyList,
  isLoading,
  isError,
  ListHeaderComponent,
  ownerId,
  cycleId,
}: GoalsListLayoutProps<T>) {
  const {theme, spacing} = useTheme();
  const paddingBottom = useSafeAreaBottomPadding({extra: spacing.x7});

  return (
    <>
      <List<T>
        data={data}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
        style={[styles.content, {paddingBottom}]}
        hasNextPage={hasNextPage}
        onNextPage={getNextPage}
        onRefresh={refreshList}
        isFetchingNextPage={isFetchingNextPage}
        isRefreshing={isRefreshing}
        titleEmptyList={titleEmptyList}
        descriptionEmptyList={descriptionEmptyList}
        IconEmptyList={IconEmptyList}
        isLoading={isLoading}
        isError={isError}
        ListHeaderComponent={ListHeaderComponent}
        ListEmptyComponent={isLoading ? <GoalsListSK /> : null}
        paginationType="button"
        backgroundColor={theme.background.layout.default}
      />
      <ButtonCreateGoalFooter
        goalOwner={ownerId ? {userId: ownerId} : undefined}
        cycleId={cycleId}
      />
    </>
  );
}

export default GoalsListLayout;