import React from 'react';
import { SBox } from '../../s-components/layout/s-box';
import { SInfoTitleSmall } from '../../s-components/s-info-title-small';
import { InfoMarketError } from './info-market-error';
import { InfoMarketSkeleton } from './info-market-skeleton';
import { LatencyGraph } from '../../../graph/components/latency-graph';
import { NMarket } from '../../types';

type TProps = {
  mt?: number;
  card: NMarket.TMarketItem;
  marketBlock?: boolean;
};

export const InfoLatencyBlock: React.FC<TProps> = props => {
  const { mt, card, marketBlock } = props;
  const { visibility } = card.graphVendors;
  const displayTitle = marketBlock && (!visibility.empty || visibility.error);

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

  return (
    <SBox mt={mt} height={162}>
      {displayTitle ? (
        <SInfoTitleSmall>{card.header.marketNameShort}</SInfoTitleSmall>
      ) : null}
      <SBox height={140}>
        {visibility.loading ? <InfoMarketSkeleton /> : null}
        {visibility.error ? <InfoMarketError /> : null}
        {!visibility.loading && !visibility.error && !visibility.empty ? (
          <LatencyGraph {...card.graphVendors} />
        ) : null}
      </SBox>
    </SBox>
  );
};

InfoLatencyBlock.defaultProps = {
  mt: 22,
  marketBlock: true,
};