import React from 'react';
import { SFigureMessage } from '../../common/s-components/s-figure-message';
import { Figure } from '../../common/components/figure';
import { SBox } from '../../common/s-components/layout/s-box';
import { Button } from '../../common/components/button';
import { Router } from '../../common/utils/navigation-service';
import { ROUTES } from '../../app/constants';

type TProps = {
  verticalOffset: number;
};

export const ViewNoNotificationResultWithNotificationSettings: React.FC<
  TProps
> = props => {
  const { verticalOffset } = props;
  return (
    <SBox flex={1} flexShrink={1} flexGrow={0}>
      <Figure
        verticalOffset={verticalOffset}
        variant="notifications-disabled"
        title="Notifications Disabled"
        renderMessage={() => (
          <SFigureMessage>
            Enable notifications{'\n'}in Notification Settings.
          </SFigureMessage>
        )}
        placeholderHeight={226}
        placeholderBottomOffset={27}
      />

      <Button
        mt={27}
        testID="go-to-settings-button"
        variant="primary"
        onPress={() => {
          Router.navigateTo(
            ROUTES.notifications + ROUTES.notificationsettings,
            {
              noAnimation: true,
            }
          );
        }}
        width={182}
        alignSelf="center"
      >
        Go to Settings
      </Button>
    </SBox>
  );
};