import React from 'react';
import { ErrorBlock } from '../../common/components/error-block';
import { Donut } from '../../graph/components/donut';
import { EmptyMonitoring } from './empty-monitoring';
import { fp as _ } from '../../common/utils/fp';
import { TEntity, TRangeEntity } from '../../common/types';
import { TDonutData } from '../types';

type TProps = {
  entity: TEntity<TDonutData>;
  range?: TRangeEntity;
};

export const TabContent: React.FC<TProps> = props => {
  const { entity, range } = props;
  const isData = !_.path('data.empty', entity) && !entity.error;

  return (
    <>
      {isData ? (
        <Donut
          segments={entity.data!.segments}
          range={_.path('standard', range)}
          colors={entity.data!.colors}
        />
      ) : null}
      {_.path('data.empty', entity) ? (
        <EmptyMonitoring {...entity.data!.emptyParam} />
      ) : null}
      {entity.error ? (
        <ErrorBlock
          height={272}
          mt={24}
          message={entity.data!.errorMsg}
          textTopMargin={-2}
        />
      ) : null}
    </>
  );
};