import React, { memo } from 'react';
import { Nullable } from 'tsdef';
import { StyleSheet } from 'react-native';
import { SBox } from '../../common/s-components/layout/s-box';
import { SInfoTitle } from '../../common/s-components/s-info-title';
import { SInfoTitleMedium } from '../../common/s-components/s-info-title-medium';
import { SInfoParagraph } from '../../common/s-components/s-info-paragraph';
import { theme } from '../../app/theme';
import { InfoLatencyBlock } from '../../common/components/info-cards/info-latency-block';
import { allDataEmpty, infoMarketsAnyError } from '../transducers';
import { NMarket } from '../../common/types';
import { Icon } from '../../common/components/icon';
import { SRow } from '../../common/s-components/layout/s-row';

type TProps = {
  cards: Nullable<NMarket.TMarketItem>[];
};

export const InfoMarkets: React.FC<TProps> = memo(props => {
  const { cards } = props;
  const allEmpty = allDataEmpty(cards);
  const hasError = infoMarketsAnyError(cards);
  const displayTitle = !allEmpty || hasError;

  return (
    <SBox pb={allEmpty || hasError ? 0 : 10} pt={5}>
      <SBox alignItems="center" px={16}>
        <SInfoTitle mb={12}>What are Markets?</SInfoTitle>
        <SInfoParagraph center mb={12}>
          This section displays the all-time {'\n'}aggregated streams across all
          markets {'\n'}including the selected home market. {'\n'}
          There may be a delay depending on DSPs {'\n'}including 1 to 2-days for
          partial data.
        </SInfoParagraph>
        <SInfoParagraph center mb={20}>
          To display or change home market data, {'\n'}go to settings to choose
          a desired market.
        </SInfoParagraph>
      </SBox>
      <SRow position="relative" mx={15}>
        <Icon
          top={8.5}
          left={8.5}
          name="info"
          color="azureRadiance"
          size={22}
          testID="i-icon"
        />
        <SBox
          borderRadius={4}
          style={StyleSheet.absoluteFill}
          height={80}
          opacity={0.1}
          bg="azureRadiance"
        />
        <SInfoParagraph px={17} py={9}>
          Latest day trend is calculated against{'\n'}the same week day from the
          previous{'\n'}week (e.g. Tuesday against Tuesday).
        </SInfoParagraph>
      </SRow>
      <SBox>
        {displayTitle ? (
          <>
            <SBox
              mt={26}
              mb={32}
              width={1}
              height={1}
              bg={theme.colors.snuff}
            />
            <SInfoTitleMedium px={16} mb={0}>
              DSP Latency
            </SInfoTitleMedium>
          </>
        ) : null}
        {cards.map(card => {
          if (!card) return null;
          return (
            <InfoLatencyBlock key={card.graphVendors.variant} card={card} />
          );
        })}
      </SBox>
    </SBox>
  );
});