import React from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SInfoParagraph } from '../../common/s-components/s-info-paragraph';
import { SInfoTitle } from '../../common/s-components/s-info-title';
import { theme } from '../../app/theme';
import { InfoLatencyBlock } from '../../common/components/info-cards/info-latency-block';
import { SInfoTitleMedium } from '../../common/s-components/s-info-title-medium';
import { streamsHasData } from '../transducers';
import { TEntity } from '../../common/types';

type TProps = {
  streams: TEntity;
};

export const InfoStreams: React.FC<TProps> = props => {
  const { streams } = props;
  const { data } = streams;
  const hasData = streamsHasData(data);

  return (
    <SBox mb={-12} pt={6}>
      <SBox alignItems="center" px={16} mt={-1} mb={14}>
        <SInfoTitle mb={13}>What is Streams Overview?</SInfoTitle>
        <SInfoParagraph center>
          The data displayed highlights{'\n'}
          market-specific streams performance{'\n'}
          over time for the selected period including{'\n'}
          combined, DSP, and detailed streams {'\n'}breakdown. There may be a
          delay {'\n'}depending on DSPs.
        </SInfoParagraph>
      </SBox>
      {hasData ? (
        <>
          <SBox mt={5} width={1} height={1} bg={theme.colors.snuff} />
          <SBox px={16} mt={31} mb={-21}>
            <SInfoTitleMedium>{data.graphVendors.title}</SInfoTitleMedium>
          </SBox>
        </>
      ) : null}
      {data ? (
        <InfoLatencyBlock
          marketBlock={false}
          key={data.graphVendors.variant}
          card={data}
        />
      ) : null}
    </SBox>
  );
};