import { FC } from 'react';
import { ImageBackground, View, Text, StatusBar } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import type { NavigationProp } from '@react-navigation/native';

import { Button } from '../../components/';
import { ButtonVariants } from '../../types/components';

import { styles } from './style';
import { NAVIGATION_PAGES } from '../../types';

type Props = {
  navigation: NavigationProp<any>;
};

const WelcomeScreen: FC<Props> = ({ navigation }) => {
  return (
    <View style={{ flex: 1 }}>
      <StatusBar translucent backgroundColor="transparent" />
      <ImageBackground
        style={{ flex: 1 }}
        source={require('../../../assets/images/welcome-background.png')}
      >
        <View style={styles.overlay} />

        <SafeAreaView style={styles.wrapper}>
          <View />
          <View style={{ width: 150, height: 150, alignSelf: 'center' }}>
            <ImageBackground
              source={require('../../../assets/logo-ua.png')}
              style={{ height: '100%' }}
            />
          </View>
          <View>
            <Text style={styles.text}>Ultimate Hub</Text>
            <Text style={[styles.text, styles.subText]}>For Global Explorers</Text>
          </View>

          <View style={styles.buttonsAndText}>
            <Button onPress={() => navigation.navigate(NAVIGATION_PAGES.REGISTER)}>
              Get started
            </Button>
            <Button
              onPress={() => navigation.navigate(NAVIGATION_PAGES.LOGIN)}
              variant={ButtonVariants.OPACITY}
            >
              Login
            </Button>
            <Button
              onPress={() => navigation.navigate(NAVIGATION_PAGES.IN_APP)}
              variant={ButtonVariants.OPACITY}
            >
              Use without registration
            </Button>
          </View>
        </SafeAreaView>
      </ImageBackground>
    </View>
  );
};

export default WelcomeScreen;