import React from "react";
import { ListProps, Scroll, View } from "../components";

export const Map = (props: ListProps) => {
  const {
    horizontal,
    scrollEnabled = true,
    data,
    style,
    contentContainerStyle,
    ListEmptyComponent,
    ListHeaderComponent,
    ListFooterComponent,
    ItemSeparatorComponent,
  } = props;

  const renderItem = (item: any, index: number) => {
    return (
      <>
        {!!index &&
          (typeof ItemSeparatorComponent === "function"
            ? // @ts-ignore
              ItemSeparatorComponent()
            : ItemSeparatorComponent)}
        {props.renderItem?.({ item, index } as any)}
      </>
    );
  };

  const renderChild = () => {
    return (
      <View
        flexRow={!!horizontal}
        style={scrollEnabled ? undefined : [style, contentContainerStyle]}
      >
        {typeof ListHeaderComponent === "function"
          ? //   @ts-ignore
            ListHeaderComponent({})
          : ListHeaderComponent}

        {data?.length
          ? data.map(renderItem)
          : typeof ListEmptyComponent === "function"
          ? //   @ts-ignore
            ListEmptyComponent({})
          : ListEmptyComponent}

        {typeof ListFooterComponent === "function"
          ? //   @ts-ignore
            ListFooterComponent({})
          : ListFooterComponent}
      </View>
    );
  };

  if (scrollEnabled) return <Scroll {...props}>{renderChild()}</Scroll>;

  return renderChild();
};