import React from 'react';
import { Figure } from '../../common/components/figure';
import { SH2 } from '../../common/s-components/typography/s-h2';
import { TVendor } from '../../common/types';
import { setFigureOffset } from '../../common/transducers';
import { SFigureMessage } from '../../common/s-components/s-figure-message';

export type TProps = {
  vendor?: TVendor;
  market: string;
  verticalOffset: number;
  androidFigureOffset?: number;
};

export const FailedLoad: React.FC<TProps> = props => {
  const { vendor, verticalOffset, market, androidFigureOffset } = props;
  const vendorText = vendor === 'spotify' ? 'Spotify Daily' : 'Apple Music';
  const chartText = vendor === 'spotify' ? '200' : '100';
  const vOffset = setFigureOffset(verticalOffset, androidFigureOffset);

  return (
    <Figure
      variant="load-failed"
      verticalOffset={vOffset}
      renderTitle={() => (
        <SH2 pb={9} mt={4} lineHeight="24px" textAlign="center">
          Failed to load {vendorText}
          {'\n'}Top {chartText} chart for {market}
        </SH2>
      )}
      renderMessage={() => (
        <SFigureMessage mt={3} px={20}>
          We are experiencing some problems.{'\n'}
          Please try refreshing the page.
        </SFigureMessage>
      )}
      placeholderHeight={230}
    />
  );
};