import React from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SH2 } from '../../common/s-components/typography/s-h2';
import { Button } from '../../common/components/button';
import { Figure } from '../../common/components/figure';
import { TVendor } from '../../common/types';
import { SFigureMessage } from '../../common/s-components/s-figure-message';

export type TProps = {
  vendor?: TVendor;
  onClick: () => void;
  verticalOffset: number;
};

export const ViewNotInCharts: React.FC<TProps> = props => {
  const { vendor, onClick, verticalOffset } = props;
  const btnWidth = 140;

  return (
    <Figure
      variant="no-charts"
      verticalOffset={verticalOffset}
      renderTitle={() => (
        <SH2 pb={11} mt={-7}>
          No Changes On Charts
        </SH2>
      )}
      renderMessage={() => (
        <SFigureMessage px={20}>
          There are no entries, exits, {'\n'}
          or major moves on the {'\n'}
          {vendor === 'spotify'
            ? 'Top 200 Spotify charts.'
            : 'Top 100 Apple Music charts.'}
        </SFigureMessage>
      )}
      placeholderHeight={236}
      renderFooter={() => (
        <SBox mt={28}>
          <Button
            testID="view-not-in-charts-view-button"
            onPress={() => {
              onClick();
            }}
            width={btnWidth}
          >
            View Chart
          </Button>
        </SBox>
      )}
    />
  );
};