import { Image, Pressable, Text, View, ViewStyle } from 'react-native';
import React, { useState } from 'react';
import { styles } from './styles';
import type { LinkPayEnvironment } from '../types/link-pay-environment';
import { useLinkPayContext } from './link-pay-context';

export const LinkButton = ({
  navigation,
  style,
  sessionKey,
  environment,
  redirectUrl,
  disabled,
}: {
  navigation: any;
  style?: ViewStyle;
  sessionKey?: string;
  environment?: LinkPayEnvironment;
  redirectUrl?: string;
  disabled?: boolean;
}) => {
  const linkPayContext = useLinkPayContext();
  const openLinkView = () => {
    if (sessionKey) {
      linkPayContext.setSessionKey(sessionKey);
    }
    if (environment) {
      linkPayContext.setEnvironment(environment);
    }
    if (redirectUrl) {
      linkPayContext.setRedirectUrl(redirectUrl);
    }
    navigation.navigate('LinkPayView');
  };

  const [hovered, setHovered] = useState(false);

  const getPressableStyle = (
    style: ViewStyle | undefined,
    hovered: boolean,
    disabled?: boolean
  ) => {
    if (style) {
      return [style];
    }
    if (disabled) {
      return [styles.button, styles.btnDisabled];
    }
    if (hovered) {
      return [styles.button, styles.btnHovered];
    }
    return [styles.button];
  };

  return (
    <Pressable
      disabled={disabled}
      style={getPressableStyle(style, hovered, disabled)}
      onHoverIn={() => setHovered(true)}
      onHoverOut={() => setHovered(false)}
      onPress={openLinkView}
    >
      <View>
        <Image
          style={styles.image}
          source={require('../assets/secure-bank-payment.png')}
        />
      </View>
      <View>
        <Text style={styles.text}>Secure Bank Payment</Text>
      </View>
    </Pressable>
  );
};