import { useNavigation } from '@react-navigation/native';
import React, { useEffect, useState } from 'react';
import { View, Image } from 'react-native';

import logo from '../../../assets/login_logo.png';
import Button from '../../components/Button/Button';
import { NavProps } from '../../components/Routes/Routes';
import { TRANSITION_DURATION } from '../../constants/custom';
import { useSplashScreen } from '../../hooks/useSplashScreen';

const Landing = () => {
  const navigation = useNavigation<NavProps>();
  const [isLoading, setIsLoading] = useState(true);
  const hideSplashScreen = useSplashScreen();

  useEffect(() => {
    if (!isLoading) {
      // Wait till the navigation animation is done
      setTimeout(() => {
        hideSplashScreen();
      }, TRANSITION_DURATION);
    }
  }, [hideSplashScreen, isLoading]);

  return (
    <View className="flex-1 items-center justify-center bg-primary-bg">
      <View className="mb-6 flex-1 justify-end">
        <Image
          className="aspect-square h-3/6"
          source={logo}
          onLoadEnd={() => setIsLoading(false)}
        />
      </View>
      {!isLoading && (
        <View className="w-full flex-1 justify-start px-5">
          <Button variant="primary" onPress={() => navigation.navigate('Login')}>
            Přihlásit se
          </Button>
        </View>
      )}
    </View>
  );
};

export default Landing;
