import React, { memo } from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SInfoTitleSmall } from '../../common/s-components/s-info-title-small';
import { InfoMarketSkeleton } from '../../common/components/info-cards/info-market-skeleton';
import { InfoMarketError } from '../../common/components/info-cards/info-market-error';
import { LatencyGraph } from '../../graph/components/latency-graph';
import { TMarketsStreamsEntity } from '../types';
import { fp as _ } from '../../common/utils/fp';

export type TProps = {
  stream: TMarketsStreamsEntity;
};

export const CombinedStreamsInfoLatencyBlock: React.FC<TProps> = memo(props => {
  const { stream } = props;
  const { data } = stream;
  const visibility = _.path('graphVendors.visibility', data);
  const displayTitle = !visibility.empty || visibility.error;

  if (visibility.empty && !visibility.error) return null;

  return (
    <SBox mt={22} height={162} mb={0}>
      {displayTitle ? (
        <SInfoTitleSmall>{_.path('marketName', data)}</SInfoTitleSmall>
      ) : null}
      <SBox height={140}>
        {visibility.loading ? <InfoMarketSkeleton /> : null}
        {visibility.error ? <InfoMarketError /> : null}
        {data &&
        !visibility.loading &&
        !visibility.error &&
        !visibility.empty ? (
          <LatencyGraph {...data.graphVendors} />
        ) : null}
      </SBox>
    </SBox>
  );
});