import React, {Fragment} from 'react';
import {Image, StyleSheet, Text} from 'react-native';
import {TaggPrompt} from '../common';

export const InviteFriendsPrompt: React.FC = () => {
  return (
    <TaggPrompt
      messageHeader={'Invite Friends To Tagg!'}
      messageBody={
        'A new feature that lets you invite your friends to Tagg. \nClick on your friends list to do so!'
      }
      logoType={'invite_friends'}
      hideCloseButton={true}
      noPadding={true}
      onClose={() => {}}
    />
  );
};

export const PrivateAccountsPrompt: React.FC = () => {
  return (
    <TaggPrompt
      messageHeader={'Private or Public!'}
      messageBody={
        'You can now choose to make your account private!\nHead over to the privacy tab in settings to check it out'
      }
      logoType={'private_accounts'}
      hideCloseButton={true}
      noPadding={true}
      onClose={() => {}}
    />
  );
};

interface SPPromptNotificationProps {
  showSPNotifyPopUp: boolean;
}

export const SPPromptNotification: React.FC<SPPromptNotificationProps> = ({
  showSPNotifyPopUp,
}) => {
  return showSPNotifyPopUp ? (
    <TaggPrompt
      messageHeader={'New Suggested People Page!'}
      messageBody={
        <>
          <Text>
            A new page where you can discover new profiles. Just press the new{' '}
          </Text>
          <Image
            style={styles.icon}
            source={require('../../assets/navigationIcons/home.png')}
          />
          <Text> button on the tab bar to check it out!</Text>
        </>
      }
      logoType={'tagg'}
      hideCloseButton={true}
      noPadding={true}
      onClose={() => {}}
    />
  ) : (
    <Fragment />
  );
};

const styles = StyleSheet.create({
  icon: {
    width: 20,
    height: 20,
    tintColor: 'grey',
  },
});