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

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

export const ViewNoChartTracks: React.FC<TProps> = props => {
  const {
    market,
    vendor,
    verticalOffset,
    androidFigureOffset,
    variant,
    placeholderHeight,
  } = props;
  const vOffset = setFigureOffset(verticalOffset, androidFigureOffset);
  const chartName =
    vendor === 'spotify'
      ? 'the Spotify Daily\n Top 200'
      : 'the Apple Music\n Top 100';
  return (
    <Figure
      variant="no-tracks-in-chart"
      fullscreen
      verticalOffset={vOffset}
      renderMessage={() => (
        <SFigureMessage>
          There are no {variant} on {chartName} chart for{' '}
          <SText bold>{market}</SText>.
        </SFigureMessage>
      )}
      placeholderHeight={placeholderHeight!}
    />
  );
};

ViewNoChartTracks.defaultProps = {
  placeholderHeight: 220,
};