import React, { memo } from 'react';
import { SText } from '../../../common/s-components/typography/s-text';
import { fp as _ } from '../../../common/utils/fp';
import { withMarkets } from '../../../common/hoc/with-markets';
import { TMarketsAssoc } from '../../../common/types';
import { SEmptyContainer } from '../../s-components/graph/s-empty-container';
import { SEmptyMessage } from '../../s-components/graph/s-empty-message';

type TProps = {
  marketCode: string;
  variant: string;
  marketsAssoc: TMarketsAssoc;
};

export const EmptyComponent: React.FC<TProps> = memo(props => {
  const { marketCode, variant, marketsAssoc } = props;

  const marketName =
    marketCode === 'all'
      ? 'All Markets'
      : _.path([marketCode, 'short_name'], marketsAssoc);

  return (
    <SEmptyContainer>
      <SEmptyMessage>
        No {variant} in period for <SText bold>{marketName}</SText>.
      </SEmptyMessage>
    </SEmptyContainer>
  );
});

export const Empty = _.compose(withMarkets)(EmptyComponent);