import React from "react";
import { FlatList, FlatListProps } from "react-native";
import { AtomHeadline } from "native/atoms/Typography/Headline";
import { ItemContainer, List } from "./styles";
import { ITypographyProps } from "native/atoms/Typography/TypographyProps";
import { IEmptyDataProps, MoleculeEmptyData } from "native/molecules/EmptyData";
import { CSSObject } from "styled-components";

type CustomTitleStylesType = Omit<ITypographyProps, "text">;

interface ISectionList<T> {
  sectionTitle: string;
  listConfig: IListConfig;
  customTitleStyle?: CustomTitleStylesType;
  data: Array<T>;
}

interface IListConfig {
  renderComponent: any;
  numberOfColumns?: number;
  keyExtractorList?: () => any;
  orientation?: "vertical" | "horizontal";
  itemSeparation?: string;
  heightItemContainer?: string;
  widthItemContainer?: string;
}

export interface IListProps<T> {
  /** List of Data that wll be listed */
  listData: Array<ISectionList<T>>;
  /** The width of the list */
  listWidth?: string;
  listHeight?: string;
  /** Empty Data configuration */
  emptyDataProps?: Partial<IEmptyDataProps>;
  /** FlatListProps */
  flatListProps?: Omit<Partial<FlatListProps<T>>, "data" | "renderItem">;
  /** Style content container list */
  contentContainerStyle?: CSSObject;
}

export const OrganismsList = <T extends unknown>({
  listData,
  listWidth = "100%",
  listHeight = "auto",
  emptyDataProps,
  flatListProps,
  contentContainerStyle,
}: IListProps<T>) => {
  const EmptyListData = () => {
    return (
      <MoleculeEmptyData
        {...emptyDataProps}
        iconName={emptyDataProps?.iconName || "empty-beer"}
        titleText={emptyDataProps?.titleText || "Hey Beer Lover!"}
        bodyText={
          emptyDataProps?.bodyText ||
          "New Offers comming soon, please stay tune for more"
        }
      />
    );
  };

  const _renderList = ({ section, index }: any) => {
    if (index !== 0) return null;

    const _renderItem = ({ item }: any) => {
      return (
        <ItemContainer
          itemSeparation={section.listConfig.itemSeparation || "5px"}
          numberOfColumns={section.listConfig.numberOfColumns}
          heightItemContainer={section.listConfig.heightItemContainer || "auto"}
          widthItemContainer={section.listConfig.widthItemContainer || "auto"}
        >
          <section.listConfig.renderComponent {...item} />
        </ItemContainer>
      );
    };

    return (
      <FlatList
        {...flatListProps}
        numColumns={
          section.listConfig.orientation == "horizontal"
            ? 0
            : section.listConfig.numberOfColumns
        }
        horizontal={section.listConfig.orientation == "horizontal"}
        data={section.data}
        renderItem={_renderItem}
        keyExtractor={section.keyExtractor}
        columnWrapperStyle={
          section.listConfig.numberOfColumns > 1
            ? { flex: 1, justifyContent: "center" }
            : null
        }
      />
    );
  };

  const _renderSectionHeader = ({ section }: any) => {
    return (
      <AtomHeadline
        size="small"
        text={section.sectionTitle}
        {...section.customTitleStyle}
      />
    );
  };

  const _renderEmptyComponent = ({ section }: any) =>
    !section.data.length ? <EmptyListData /> : null;

  return (
    <List
      stickySectionHeadersEnabled={false}
      listHeight={listHeight}
      listWidth={listWidth}
      renderItem={_renderList}
      renderSectionHeader={_renderSectionHeader}
      sections={listData}
      ListEmptyComponent={<EmptyListData />}
      renderSectionFooter={_renderEmptyComponent}
      contentContainerStyle={contentContainerStyle}
    />
  );
};
