import React from 'react';
import { Figure } from './figure';
import { setFigureOffset } from '../transducers';
import { SFigureMessage } from '../s-components/s-figure-message';

type TProps = {
  keyboardHiddenMargin?: number;
  keyboardDisplayedMargin?: number;
  androidFigureOffset?: number;
  figureVariant?: string;
  color?: string;
  withAnimation?: boolean;
};

export const NoResults: React.FC<TProps> = props => {
  const {
    androidFigureOffset,
    figureVariant,
    keyboardHiddenMargin,
    keyboardDisplayedMargin,
    color,
    withAnimation,
  } = props;
  const verticalOffset = setFigureOffset(-45, androidFigureOffset);

  return (
    <>
      <Figure
        withAnimation={withAnimation}
        variant={figureVariant}
        verticalOffset={verticalOffset}
        keyboardHiddenMargin={keyboardHiddenMargin}
        keyboardDisplayedMargin={keyboardDisplayedMargin}
        renderTitle={() => (
          <SFigureMessage semibold color={color}>
            No results to show.{'\n'}
            Try another search.
          </SFigureMessage>
        )}
        placeholderHeight={227}
      />
    </>
  );
};

NoResults.defaultProps = {
  figureVariant: 'no-search',
  color: 'white',
  withAnimation: false,
};