import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { SocialButtonProps } from './SocialButton.props';
import { getStyles } from './SocialButton.styles';
import { useAppTheme } from '@theme';
import Svg, { Path } from 'react-native-svg';

const GoogleIcon = ({ style }: { style: any }) => (
  <Svg width={24} height={24} viewBox="0 0 24 24" style={style}>
    <Path
      fill="#4285F4"
      d="M23.745 12.27c0-.7-.06-1.4-.19-2.07H12v3.92h6.69c-.29 1.5-.14 3.01-.97 4.14v3.44h6.53c3.82-3.51 6-8.68 6-14.43z"
    />
    <Path
      fill="#34A853"
      d="M12 24c3.24 0 5.97-1.08 7.96-2.91l-6.53-3.44c-1.8 1.25-4.13 2.02-6.53 1.99-4.8 0-8.87-3.23-10.33-7.58H.24v3.56C2.29 20.2 6.85 24 12 24z"
    />
    <Path
      fill="#FBBC05"
      d="M1.67 11.97a14.09 14.09 0 0 1 0-4.08V4.33H.24A11.96 11.96 0 0 0 0 12c0 2.7.9 5.2 2.42 7.21l5.88-4.56c-.95-1.07-1.48-2.45-1.48-3.79c.01-.3.04-.61.09-.9z"
    />
    <Path
      fill="#EA4335"
      d="M12 4.75c1.77-.03 3.47.63 4.72 1.84l3.5-3.5C18.01 1.05 15.19 0 12 0 6.85 0 2.29 3.8.24 8.41l6.33 4.9C8.03 8.98 12.1 4.75 12 4.75z"
    />
  </Svg>
);

const AppleIcon = ({ style, color }: { style: any; color: string }) => (
  <Svg width={24} height={24} viewBox="0 0 24 24" style={style}>
    <Path
      fill={color}
      d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.82M15.97 4.17c.66-.81 1.11-1.93.99-3.06-.96.04-2.13.64-2.82 1.45-.6.7-1.13 1.84-.99 2.94.99.08 2.15-.52 2.82-1.33"
    />
  </Svg>
);

export const SocialButton: React.FC<SocialButtonProps> = ({
  provider,
  onPress,
  style,
  ...rest
}) => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);
  const isGoogle = provider === 'google';
  const label = isGoogle ? 'Google' : 'Apple';

  return (
    <TouchableOpacity
      style={[styles.button, style]}
      onPress={onPress}
      activeOpacity={0.8}
      {...rest}
    >
      {isGoogle ? (
        <GoogleIcon style={styles.icon} />
      ) : (
        <AppleIcon style={styles.icon} color={colors.text} />
      )}
      <Text style={styles.text}>{label}</Text>
    </TouchableOpacity>
  );
};
