import React from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SInfoTitle } from '../../common/s-components/s-info-title';
import { SInfoParagraph } from '../../common/s-components/s-info-paragraph';
import { theme } from '../../app/theme';
import { SInfoTitleMedium } from '../../common/s-components/s-info-title-medium';
import { CombinedStreamsInfoLatencyBlock } from './combined-streams-info-latency-block';
import {
  allDataEmpty,
  infoMarketsAnyError,
} from '../../track-markets/transducers';
import { TMarketsStreamsEntity } from '../types';
import { fp as _ } from '../../common/utils/fp';

export type TProps = {
  streams: TMarketsStreamsEntity[];
};

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

  return (
    <SBox pb={allEmpty || hasError ? 0 : 10} pt={5}>
      <SBox alignItems="center" px={16} mt={-1} mb={14}>
        <SInfoTitle mb={13}>What is Combined Streams?</SInfoTitle>
        <SInfoParagraph center>
          The data shown is the performance{'\n'}
          of a track&apos;s streams for the Top 5{'\n'}
          markets in the selected period. There{'\n'}
          may be a delay depending on DSPs.
        </SInfoParagraph>
      </SBox>
      {displayTitle ? (
        <>
          <SBox mt={6} mb={32} width={1} height={1} bg={theme.colors.snuff} />
          <SInfoTitleMedium px={16} mb={0}>
            DSP Latency
          </SInfoTitleMedium>
        </>
      ) : null}
      {streams.map((stream: TMarketsStreamsEntity) => {
        if (!stream) return null;
        return (
          <CombinedStreamsInfoLatencyBlock
            key={_.path('data.graphVendors.variant', stream)}
            stream={stream}
          />
        );
      })}
    </SBox>
  );
};