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

type TProps = {
  id: string;
  vendor: TVendor;
};

export const EmptyPerformance: React.FC<TProps> = props => {
  const { id, vendor } = props;
  const containerWidth = vendor === 'spotify' ? 283 : getWinWidth();
  const containerHeight = vendor === 'spotify' ? 306 : 298;

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