import React, { useContext, memo } from 'react';
import { Platform } from 'react-native';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SRow } from '../../../common/s-components/layout/s-row';
import { Icon } from '../../../common/components/icon';
import { theme } from '../../../app/theme';
import { SH6 } from '../../../common/s-components/typography/s-h6';
import { StreamsCard } from './streams-card';
import { Skeleton } from './skeleton';
import { Skeleton1 } from './skeleton1';
import { SkeletonHeader } from './skeleton-header';
import { ErrorBlock } from '../../../common/components/error-block';
import { InfinityList } from './infinity-list';
import { ContextMarkets } from '../../contexts';
import { NoResults } from '../../../common/components/no-results';
import { SMarketsCardBg } from '../../s-components/s-markets-card-bg';
import { fp as _ } from '../../../common/utils/fp';

type TProps = {
  onCardClick: (market: string) => void;
};

export const MarketsCards = memo((params: TProps) => {
  const { onCardClick } = params;
  const { visibility, cards, activeTab } = useContext(ContextMarkets);

  const data = _.path('data', cards);
  const showTitle = (visibility!.data && data) || visibility!.error;
  const isTopMarketsTab = activeTab === 'top';
  const allMarketsPadding = visibility!.skeleton ? 71 : 73;
  const topPadding = isTopMarketsTab ? 0 : allMarketsPadding;
  const noResults = visibility!.data && !data;
  const isIos = Platform.OS === 'ios';
  const noResultKeyboardMargin = isIos ? 144 : 70;
  const noResultMargin = isIos ? 184 : 210;
  const bgTopPosition = isTopMarketsTab ? 0 : 400;

  return (
    <SBox pb={18}>
      {noResults ? (
        <NoResults
          withAnimation
          keyboardDisplayedMargin={noResultKeyboardMargin}
          keyboardHiddenMargin={noResultMargin}
        />
      ) : null}
      <SBox position="relative" mt={1}>
        <SMarketsCardBg top={bgTopPosition} />
        <SBox px={16} pb={32} pt={topPadding}>
          {visibility!.skeleton ? (
            <>
              <SkeletonHeader />
              {isTopMarketsTab ? <Skeleton /> : <Skeleton1 />}
            </>
          ) : null}
          {showTitle ? (
            <SRow mt={0} mb={22} alignItems="center">
              <Icon
                name="sort"
                color={theme.colors.periwinkleGray}
                size={12}
                mr={8}
                mt={-1}
              />
              <SH6 color={theme.colors.periwinkleGray}>streams</SH6>
            </SRow>
          ) : null}
          {visibility!.error ? (
            <ErrorBlock mx={-1} message="Data failed to load." height={158} />
          ) : null}
          {visibility!.data && data ? (
            <>
              {isTopMarketsTab &&
                data.map((card, index) => {
                  return (
                    <StreamsCard
                      testID="markets-streams-card"
                      showLine
                      index={index}
                      key={card.market}
                      card={card}
                      onCardClick={onCardClick}
                    />
                  );
                })}
              {!isTopMarketsTab ? (
                <InfinityList items={data} onCardClick={onCardClick} />
              ) : null}
            </>
          ) : null}
        </SBox>
      </SBox>
    </SBox>
  );
});