import React from 'react';
import { SBox } from '../s-components/layout/s-box';
import { Placeholder } from './placeholder';
import { theme } from '../../app/theme';
import { SFigureMessage } from '../s-components/s-figure-message';

type TProps = {
  id: string;
  title?: string;
  isAllEmpty?: boolean;
};

export const EmptyStreams: React.FC<TProps> = props => {
  const { id, title, isAllEmpty } = props;
  const placeholderVariant = id === 'combined' ? 'streams' : id;
  const streamsTitle = title ? `${title} ` : null;

  return (
    <SBox
      height={isAllEmpty ? 160 : 250}
      width={isAllEmpty ? 1 : 283}
      ml={isAllEmpty ? 0 : 16}
      bg={theme.colors.fiord}
      borderRadius={8}
      justifyContent="center"
    >
      <SBox mt={2}>
        <SBox position="relative" top={-6} left={1}>
          <Placeholder
            variant={`no-${placeholderVariant}`}
            baseWidth={105}
            baseHeight={185}
            marginBottom={0}
          />
        </SBox>
        <SBox mt={5}>
          <SFigureMessage>
            No {streamsTitle}streams available {'\n'}
            for the selected period.
          </SFigureMessage>
        </SBox>
      </SBox>
    </SBox>
  );
};

EmptyStreams.defaultProps = {
  title: undefined,
  isAllEmpty: false,
};