import React, { memo } from 'react';
import { Platform } from 'react-native';
import { Skeleton } from './skeleton';
import { ViewLoadFailed } from '../../common/components/view-load-failed';
import { ViewNoSearchResult } from '../../common/components/view-no-search-result';
import { ViewNetworkFailed } from '../../common/components/view-network-failed';
import { ViewNoChartTracks } from './view-no-chart-tracks';
import { SBox } from '../../common/s-components/layout/s-box';
import { SwipeableList } from '../../common/components/swipeable-list';
import { TTabProps } from '../types';
import { NoChartForMarket } from '../../common/components/no-chart-for-market';
import {
  addSafeArea,
  getMarketCodeWithArticle,
  setAndroidFigureOffset,
} from '../../common/transducers';
import { EStarSourcePages } from '../../common/constants';

export const Tab: React.FC<TTabProps> = memo(props => {
  const {
    items,
    toggleStarred,
    visibility,
    activeTab,
    goToTrack,
    minHeight,
    headerAdditionalValue,
    homeMarket,
  } = props;
  const homeMarketName =
    homeMarket && homeMarket.code === '_gl'
      ? homeMarket.name
      : getMarketCodeWithArticle(homeMarket!, true);
  const maxSafeHeight = addSafeArea(229);
  const isIos = Platform.OS === 'ios';
  const vOffset = 10;
  const noResultKeyboardMargin = isIos ? -19 : 50;
  const noAvailableOffset = setAndroidFigureOffset(
    maxSafeHeight,
    minHeight,
    headerAdditionalValue
  );
  const noTracksOffset = setAndroidFigureOffset(
    maxSafeHeight,
    minHeight,
    headerAdditionalValue
  );
  const errorChartsOffset = setAndroidFigureOffset(
    maxSafeHeight,
    minHeight,
    headerAdditionalValue
  );

  if (!activeTab) return null;

  return (
    <>
      {visibility.skeleton ? <Skeleton /> : null}
      {visibility.errorCharts ? (
        <ViewLoadFailed
          variant="top-charts"
          vendor={activeTab}
          market={homeMarketName}
          addBottomIndents
          androidFigureOffset={errorChartsOffset}
          verticalOffset={-52}
        />
      ) : null}
      {visibility.noSearch ? (
        <ViewNoSearchResult
          variant="dark"
          verticalOffset={-50}
          keyboardHiddenMargin={-12}
          keyboardDisplayedMargin={noResultKeyboardMargin}
          // withAnimation
        />
      ) : null}
      {visibility.errorOffline ? (
        <ViewNetworkFailed verticalOffset={vOffset} />
      ) : null}
      {visibility.noAvailable ? (
        <NoChartForMarket
          androidFigureOffset={noAvailableOffset}
          vendor={activeTab}
          verticalOffset={-18}
        />
      ) : null}
      {visibility.noTracks ? (
        <ViewNoChartTracks
          androidFigureOffset={noTracksOffset}
          market={homeMarketName}
          vendor={activeTab}
          verticalOffset={-28}
        />
      ) : null}
      <SBox mt={0} mb={32}>
        {visibility.items ? (
          <SBox mb={16}>
            <SwipeableList
              testID="charts-swipeable-list"
              cards={items}
              onPress={goToTrack}
              onPressRight={toggleStarred}
              pageVariant={activeTab !== 'apple' ? 'charts' : 'charts-2'}
              starSource={EStarSourcePages.Charts}
            />
          </SBox>
        ) : null}
      </SBox>
    </>
  );
});