import React from 'react';
import { StyleSheet, View } from 'react-native';
import { useTheme, Button, ActivityIndicator, Text } from 'react-native-paper';

export interface GoogleButtonProps {
  /** Callback when the button is pressed */
  onPress: () => void;
  /** Whether the sign-in is in progress */
  loading?: boolean;
}

/**
 * Styled Google sign-in button.  Displays the Google "G" logo,
 * "Continue with Google" text, and an ActivityIndicator while loading.
 * Uses Paper's contained-tonal Button mode.
 */
export function GoogleButton({ onPress, loading = false }: GoogleButtonProps) {
  const theme = useTheme();

  return (
    <Button
      mode="contained-tonal"
      onPress={onPress}
      disabled={loading}
      style={[
        styles.button,
        {
          backgroundColor: loading
            ? theme.colors.surfaceDisabled
            : '#FFFFFF',
          borderRadius: 24,
        },
      ]}
      contentStyle={styles.content}
      labelStyle={[
        styles.label,
        {
          color: loading
            ? theme.colors.onSurfaceDisabled
            : theme.colors.onSurface,
        },
      ]}
      icon={() => (
        <GoogleGIcon color={loading ? theme.colors.onSurfaceDisabled : '#4285F4'} />
      )}
    >
      Continue with Google
    </Button>
  );
}

/**
 * Renders a simple "G" Google logo using a coloured Text element
 * styled to mimic the Google brand mark.
 */
function GoogleGIcon({ color = '#4285F4' }: { color?: string }) {
  return (
    <View style={styles.gContainer}>
      <Text
        style={[
          styles.gText,
          { color },
        ]}
      >
        G
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  button: {
    width: '100%',
    paddingVertical: 4,
    borderColor: '#DDDDDD',
    borderWidth: 1,
  },
  content: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 6,
    gap: 12,
  },
  label: {
    fontSize: 16,
    fontWeight: '600',
    letterSpacing: 0.2,
  },
  gContainer: {
    width: 24,
    height: 24,
    alignItems: 'center',
    justifyContent: 'center',
  },
  gText: {
    fontSize: 22,
    fontWeight: '700',
    fontStyle: 'italic',
  },
});