import { useNavigation } from "@react-navigation/native";
import {
  Body2,
  INatIcon,
} from "components/SharedComponents";
import { Pressable, View } from "components/styledComponents";
import * as React from "react";
import type { RealmUser } from "realmModels/types";
import { useTranslation } from "sharedHooks";
import useStore from "stores/useStore";
import { getShadow } from "styles/global";
import colors from "styles/tailwindColors";

import BannerDismissButton from "./BannerDismissButton";

const DROP_SHADOW = getShadow( {
  offsetHeight: 2,
  shadowOpacity: 1,
  shadowRadius: 2,
} );

interface Props {
  currentUser: RealmUser | null;
}

const LoginBanner = ( {
  currentUser,
}: Props ) => {
  const { t } = useTranslation( );
  const navigation = useNavigation();
  const loginBannerDismissed = useStore( state => state.layout.loginBannerDismissed );
  const setLoginBannerDismissed = useStore( state => state.layout.setLoginBannerDismissed );

  if ( !currentUser && !loginBannerDismissed ) {
    return (
      <View className="z-20">
        <View className="absolute self-center top-0">
          <View className="pt-[20px] px-[20px]" pointerEvents="box-none">
            <BannerDismissButton
              accessibilityLabel={t( "Close" )}
              onPress={( ) => setLoginBannerDismissed( )}
              testID="login-banner-dismiss"
            />
            <View pointerEvents="box-none">
              <Pressable
                style={DROP_SHADOW}
                accessibilityRole="button"
                className="
                flex-row
                shrink
                items-center
                justify-center
                p-[20px]
                space-x-[12px]
                bg-white
                rounded-xl"
                onPress={( ) => navigation.navigate( "LoginStackNavigator" )}
                disabled={false}
              >
                <INatIcon
                  name="inaturalist"
                  size={25}
                  color={colors.inatGreen}
                />
                <Body2 maxFontSizeMultiplier={1}>
                  {t( "Already-have-an-iNaturalist-account" )}
                </Body2>
              </Pressable>
            </View>
          </View>
        </View>
      </View>
    );
  }

  return null;
};

export default LoginBanner;
