import * as React from "react";
import * as R from "ramda";
import { GeneralContentScreen } from "@applicaster/zapp-react-native-ui-components/Components/GeneralContentScreen";

import { FeedLoader } from "../FeedLoader";
import { ScreenResolver } from "../ScreenResolver";

type Props = ZappScreenProps & {
  feedUrl?: string;
  isInsideContainer?: boolean;
  screenData: {};
  groupId: string;
  scrollViewExtraProps: (
    | import("react-native").ScrollViewProps
    | import("react-native").FlatListProps<any>
  ) &
    Record<string, any>;
  appData: AppDataKeys;
  screenTitle: string;
  screenSummary: string;
  setIsScreenWrappedInContainer: (isInsideContainer: boolean) => void;
  screenContext: ZappRiver;
  river: ZappRiver;
};

type State = {
  refreshing: boolean;
};

export class RiverComponent extends React.Component<Props, State> {
  private currentScreenTitle: string;
  private currentScreenSummary: string;
  constructor(props: Props) {
    super(props);

    this.state = {
      refreshing: false,
    };

    this.applyContexts();

    this.pullToRefreshPipesV1RefreshingStateUpdater =
      this.pullToRefreshPipesV1RefreshingStateUpdater.bind(this);
  }

  applyContexts() {
    const { isInsideContainer = false, setIsScreenWrappedInContainer } =
      this.props;

    setIsScreenWrappedInContainer(isInsideContainer);
  }

  componentDidUpdate(prevProps) {
    const {
      screenContext: {
        navBar: { setTitle: setScreenTitle, setSummary: setScreenSummary },
      },
      isInsideContainer,
    } = this.props;

    if (!isInsideContainer) {
      if (this.props.screenTitle !== prevProps.screenTitle) {
        setScreenTitle(this.currentScreenTitle);
      }

      if (this.props.screenSummary !== prevProps.screenSummary) {
        setScreenSummary(this.currentScreenSummary);
      }
    }
  }

  usesPipesV1Layout() {
    return this.props?.appData?.layoutVersion === "v1";
  }

  // Method added to keep pipes v1 logic up to date with the pullToRefresh state.
  // TODO: Remove when pipes v1 is deprecated.
  pullToRefreshPipesV1RefreshingStateUpdater(refreshing) {
    this.setState({ refreshing });
  }

  render() {
    const {
      river,
      feedUrl,
      screenData,
      isInsideContainer,
      groupId,
      scrollViewExtraProps,
    } = this.props;

    const { id, type } = river;

    const connectedFeedURL = R.path(["content", "src"], screenData);
    const _feedUrl = feedUrl || connectedFeedURL;

    if (type !== "general_content") {
      let riverWithConnectedDatasource;

      if (_feedUrl && this.usesPipesV1Layout()) {
        riverWithConnectedDatasource = {
          ...river,
          data: R.merge(river.data || {}, { source: _feedUrl }),
        };
      }

      return (
        <ScreenResolver
          screenData={R.mergeLeft(riverWithConnectedDatasource || river, {
            groupId,
            ...screenData,
          })}
          screenId={id}
          screenType={type}
        />
      );
    }

    if (!_feedUrl || !this.usesPipesV1Layout()) {
      this.currentScreenTitle = (screenData && screenData.title) || null;

      return (
        <GeneralContentScreen
          screenId={id}
          isScreenWrappedInContainer={isInsideContainer}
          groupId={groupId}
          scrollViewExtraProps={scrollViewExtraProps}
        />
      );
    }

    return (
      <FeedLoader
        feedUrl={_feedUrl}
        refreshing={this.state.refreshing}
        refreshCallback={() =>
          this.pullToRefreshPipesV1RefreshingStateUpdater(false)
        }
      >
        {(feed) => {
          if (!feed) {
            return null;
          }

          this.currentScreenSummary = (feed && feed.summary) || null;

          this.currentScreenTitle =
            (feed && feed.title) || (screenData && screenData.title) || null;

          return (
            <GeneralContentScreen
              screenId={id}
              groupId={groupId}
              feed={feed}
              isScreenWrappedInContainer={isInsideContainer}
              scrollViewExtraProps={scrollViewExtraProps}
              componentsMapExtraProps={{
                pullToRefreshPipesV1RefreshingStateUpdater:
                  this.pullToRefreshPipesV1RefreshingStateUpdater,
                refreshingPipesV1: this.state.refreshing,
              }}
            />
          );
        }}
      </FeedLoader>
    );
  }
}