import * as React from "react";
import { View, Text, ViewStyle } from "react-native";

import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/localizationUtils";
import { withNavigator } from "../../Decorators/Navigator";

import { ComponentResolver } from "../ComponentResolver";
import { assignDataSource } from "./assignDataSource";
import { getStyles, getNumberOfLines, DEFAULT } from "./styles";

type Props = {
  component: ZappUIComponent;
  feed: ZappFeed;
};

export function FavoritesComponent({ component, feed }: Props) {
  const theme = useTheme();
  const screenData = useCurrentScreenData();
  const styles = getStyles((screenData as ZappRiver).styles, theme);

  const localizations = useLocalizedStrings({
    localizations: (screenData as ZappRiver).localizations,
  });

  if (feed?.entry?.length && feed?.entry?.length > 0) {
    return (
      <ComponentResolver
        key={feed?.entry.length}
        component={component}
        decorators={[withNavigator, assignDataSource(feed)]}
      >
        {(Component, CellRenderer) => {
          return (
            <Component
              key={component?.id}
              isScreenWrappedInContainer={false}
              component={component}
              componentIndex={0}
              CellRenderer={CellRenderer}
              onLoadFinished={() => {}}
            />
          );
        }}
      </ComponentResolver>
    );
  }

  return (
    <View style={styles.container as ViewStyle}>
      <Text
        style={styles.emptyText}
        numberOfLines={getNumberOfLines((screenData as ZappRiver).styles)}
      >
        {localizations?.favorites_empty_text || DEFAULT.text}
      </Text>
    </View>
  );
}