import { ImageBackground, Col } from 'components/layout';
import React, { useCallback, useEffect } from 'react';
import { useAuth, useTheme } from 'hooks';
import { NavigationRoutes } from 'navigation/enum';
import { RootStackScreenProps } from 'navigation/types';
import { useTranslation } from 'react-i18next';
import { Button, SafeScreen, Text } from 'components';

export const Landing: React.FC<LandingType> = ({ route }) => {
  const { setAuthKeys, login } = useAuth();
  const { activeThemeMode } = useTheme();
  const { t } = useTranslation();

  const { accessToken, refreshToken } = route.params || { accessToken: null, refreshToken: null };

  const setKeys = useCallback(async () => {
    setAuthKeys(accessToken, refreshToken);
  }, [accessToken, refreshToken, setAuthKeys]);

  useEffect(() => {
    if (accessToken && refreshToken) {
      setKeys();
    }
  }, [accessToken, login, refreshToken, setAuthKeys, setKeys]);
  const backgroundImage =
    activeThemeMode === 'dark'
      ? require('assets/images/landing/dark.png')
      : require('assets/images/landing/light.png');

  return (
    <SafeScreen>
      <ImageBackground
        flex={1}
        justifyContent="flex-end"
        resizeMode="contain"
        source={backgroundImage}
      >
        <Col alignSelf="center" width={315}>
          <Text variant="heading" mb="l" textAlign="center" color="body" weightVariant="normal">
            {t('landing.body')}
          </Text>
          <Button
            onPress={login}
            my="3xl"
            title={t('button.get-started')}
            colorVariant="primary"
            sizeVariant="extra-large"
          />
        </Col>
      </ImageBackground>
    </SafeScreen>
  );
};
type LandingType = RootStackScreenProps<NavigationRoutes.Landing>;