import React, { memo } from 'react';
import { Platform } from 'react-native';
import { Skeleton3 } from './skeleton3';
import { ChartsWidget } from './charts-widget';
import { ViewNetworkFailed } from '../../common/components/view-network-failed';
import { Skeleton1 } from './skeleton1';
import { ViewNotInCharts } from './view-not-in-charts';
import { Entries } from './entries';
import { Removals } from './removals';
import { EntriesAndRemovals } from './entries-and-removals';
import { Skeleton2 } from './skeleton2';
import { Skeleton4 } from './skeleton4';
import { ChartMovements } from './chart-movements';
import {
  getMarketCodeWithArticle,
  getStatusBarHeight,
} from '../../common/transducers';
import { TTabProps, THomeTrack } from '../types';
import { NoChartForMarket } from '../../common/components/no-chart-for-market';
import { FailedLoad } from './failed-load';
import { fp as _ } from '../../common/utils/fp';

export const Tab: React.FC<TTabProps> = memo(props => {
  const {
    additions,
    moves,
    removals,
    visibility,
    toggleStarred,
    additionsLength,
    removalsLength,
    chartPicture,
    activeTab,
    market,
    goToHomeTrack,
    goToHomeList,
    goToHomeCharts,
    infoPressHandler,
  } = props;

  const safeArea = getStatusBarHeight();
  const marketName = _.pathEq(['code'], '_gl', market)
    ? _.path('name', market)
    : getMarketCodeWithArticle(market, true);
  const vOffset = Platform.OS === 'android' ? -87 : 100;

  return (
    <>
      {visibility.skeleton3 ? <Skeleton3 /> : null}
      {visibility.topCharts ? (
        <ChartsWidget
          vendor={activeTab}
          onClick={goToHomeCharts}
          image={chartPicture}
        />
      ) : null}

      {visibility.errorOffline ? (
        <ViewNetworkFailed verticalOffset={vOffset} />
      ) : null}
      {visibility.skeleton1 ? <Skeleton1 /> : null}

      {visibility.noAvailable ? (
        <NoChartForMarket
          vendor={activeTab}
          verticalOffset={115}
          androidFigureOffset={-100}
        />
      ) : null}

      {visibility.noItems ? (
        <ViewNotInCharts
          vendor={activeTab}
          onClick={goToHomeCharts}
          verticalOffset={safeArea}
        />
      ) : null}

      {visibility.allErrors && !visibility.errorOffline ? (
        <FailedLoad
          vendor={activeTab}
          verticalOffset={98}
          androidFigureOffset={-130}
          market={marketName}
        />
      ) : null}

      {visibility.entries || visibility.errorEntries ? (
        <Entries
          vendor={activeTab}
          market={marketName}
          length={additionsLength}
          error={visibility.errorEntries}
          onBtnPress={() => {
            goToHomeList('entries');
          }}
          onCardPress={(params: THomeTrack) => {
            goToHomeTrack({ ...params, type: 'entries' });
          }}
          onInfoPress={infoPressHandler}
          cards={additions}
        />
      ) : null}

      {visibility.removals || visibility.errorRemovals ? (
        <Removals
          vendor={activeTab}
          market={marketName}
          length={removalsLength}
          error={visibility.errorRemovals}
          onBtnPress={() => {
            goToHomeList('exits');
          }}
          onCardPress={(params: THomeTrack) =>
            goToHomeTrack({ ...params, type: 'exits' })
          }
          onInfoPress={infoPressHandler}
          cards={removals}
        />
      ) : null}

      {visibility.skeleton1 ? <Skeleton4 /> : null}

      {/* Show both with double gradient */}
      {visibility.entriesRemovals ? (
        <EntriesAndRemovals
          additionsLength={additionsLength}
          removalsLength={removalsLength}
          vendor={activeTab}
          market={marketName}
          additions={additions}
          removals={removals}
          onCardPress={(params: THomeTrack) => goToHomeTrack({ ...params })}
          onBtnEntriesPress={() => {
            goToHomeList('entries');
          }}
          onBtnRemovalsPress={() => {
            goToHomeList('exits');
          }}
          onInfoPress={infoPressHandler}
        />
      ) : null}

      {visibility.skeleton2 ? <Skeleton2 /> : null}

      {visibility.moves || visibility.errorMoves ? (
        <ChartMovements
          cards={moves}
          market={marketName}
          onCardPress={params => goToHomeTrack({ ...params, type: 'moves' })}
          onCardPressRight={toggleStarred}
          onInfoPress={() => {
            infoPressHandler('moves');
          }}
          error={visibility.errorMoves && 'Data failed to load.'}
        />
      ) : null}
    </>
  );
});