import { GoogleSignin } from '@react-native-google-signin/google-signin';

import React from 'react';
import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Alert } from 'react-native';
import { GoogleSignin } from '@react-native-google-signin/google-signin';
import { Image } from 'expo-image';

import { AppText } from '../shared/AppText';
import { Colors, ViewStyles } from '@/src/style';
import { Spacing } from '../shared/Spacing';
import { signInWithGoogleThunk } from '@/src/store/thunks/auth-thunk';
import { useAppDispatch, useAppSelector } from '@/src/store/hooks';

// TO-DO:
// Move the web client id to env variables
GoogleSignin.configure({
  webClientId: '',
});

type Props = {
  buttonType?: 'Continue with Google' | 'Sign in with Google' | 'Sign up with Google' | 'Sign In';
};

export const ContinueWithGoogleButton = (props: Props) => {
  const { buttonType = 'Sign in with Google' } = props;

  const dispatch = useAppDispatch();
  const { isSigningInWithGoogle } = useAppSelector((state) => state.loaders);
  const user = useAppSelector((state) => state.user);
  const handleSignIn = () => {
    if (!user.name) {
      return Alert.alert('Please provide your name');
    }

    if (!user.postalCode || user.postalCode.length !== 5) {
      return Alert.alert('Please provide a valid postal code');
    }

    dispatch(signInWithGoogleThunk());
  };

  return (
    <TouchableOpacity
      activeOpacity={0.7}
      style={[styles.button, isSigningInWithGoogle && styles.buttonDisabled]}
      onPress={handleSignIn}
      disabled={isSigningInWithGoogle}>
      {isSigningInWithGoogle ? (
        <ActivityIndicator color={Colors.White} />
      ) : (
        <View style={ViewStyles.rowCenter}>
          <Image style={styles.icon} source={require('@/assets/auth/google.png')} />

          <Spacing horizontal={5} />
          <AppText style={[styles.text, isSigningInWithGoogle && styles.textDisabled]}>
            {buttonType}
          </AppText>
        </View>
      )}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'white',
    borderColor: '#747775',
    borderWidth: 1,
    borderRadius: 4,
    height: 50,
    paddingHorizontal: 12,
    maxWidth: 400,
    minWidth: 'auto',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    shadowColor: 'rgba(60, 64, 67, 0.15)',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.3,
    shadowRadius: 2,
  },
  buttonDisabled: {
    backgroundColor: '#ffffff61',
    borderColor: '#1f1f1f1f',
  },
  contentWrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    height: '100%',
  },
  icon: {
    height: 20,
    width: 20,
    marginRight: 12,
  },
  text: {
    fontWeight: '500',
    color: '#1f1f1f',
    letterSpacing: 0.25,
  },
  textDisabled: {
    opacity: 0.38,
  },
});