import React from 'react';
import { SText } from '../../common/s-components/typography/s-text';
import { SBox } from '../../common/s-components/layout/s-box';
import { Placeholder } from '../../common/components/placeholder';
import { TMarketName } from '../../market-kpi/types';
import { theme } from '../../app/theme';
import { SFigureMessage } from '../../common/s-components/s-figure-message';
import { TMarket } from '../../common/types';
import { getMarketCodeWithArticle } from '../../common/transducers/transducers.market';

type TProps = {
  marketCode: TMarketName;
  marketFullName: TMarketName;
};

export const EmptyMarkets: React.FC<TProps> = props => {
  const { marketCode, marketFullName } = props;

  const market = {
    code: marketCode,
    full_name: marketFullName,
  } as TMarket;
  const marketCodeWithArticle = getMarketCodeWithArticle(market, true);

  return (
    <SBox
      height={160}
      bg={theme.colors.fiord}
      borderRadius={8}
      alignItems="center"
      justifyContent="center"
      px={16}
    >
      <SBox mt={2}>
        <SBox position="relative" top={-6} left={1}>
          <Placeholder
            variant="no-streams"
            baseWidth={105}
            baseHeight={185}
            marginBottom={0}
          />
        </SBox>
        <SBox mt={5}>
          <SFigureMessage>
            No streams available{'\n'}
            {marketCode ? (
              <>
                for <SText bold>{marketCodeWithArticle}</SText> or{' '}
                <SText bold>Global</SText> markets.
              </>
            ) : (
              <>
                for <SText bold>Global</SText> market.
              </>
            )}
          </SFigureMessage>
        </SBox>
      </SBox>
    </SBox>
  );
};