import React from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
import TouchableOpacity from '../../TouchableOpacity';
import { safeWithTheme } from '../../../branding';
import type { ThemeProps } from '../../../branding/hoc/types';
import styles from './styles';
import accessibilityParams from '../../../accessibility';

interface SubmitButtonProps {
    title: string;
    onPress?: () => void;
    disabled?: boolean;
    isLoading?: boolean;
    style?: StyleProp<ViewStyle>;
    fixedWidth?: boolean;
    testID?: string;
}

interface SubmitButtonStyles {
    container: ViewStyle;
    fixedWidth: ViewStyle;
    containerDisabled: ViewStyle;
    activityIndicator: ViewStyle;
    label: TextStyle;
}

export const SubmitButton = ({
    title,
    onPress,
    disabled,
    isLoading,
    style,
    fixedWidth,
    testID,
    colors,
    theme
}: SubmitButtonProps & ThemeProps) => {
    const themeStyles = styles[theme] as unknown as SubmitButtonStyles;
    const accessibilityProps = testID
        ? { testID }
        : accessibilityParams('loginScreen.loginButton');

    return (
        <TouchableOpacity
            testID={testID}
            disabled={disabled}
            onPress={() => {
                if (!isLoading) {
                    onPress?.();
                }
            }}
            style={[
                themeStyles.container,
                fixedWidth && themeStyles.fixedWidth,
                style,
                disabled && themeStyles.containerDisabled
            ]}
            {...accessibilityProps}
        >
            {isLoading ? (
                <View style={themeStyles.activityIndicator}>
                    <ActivityIndicator
                        color={colors.gray0}
                        testID="activityIndicator"
                    />
                </View>
            ) : (
                <Text style={themeStyles.label} numberOfLines={2}>
                    {title.toUpperCase()}
                </Text>
            )}
        </TouchableOpacity>
    );
};

export default safeWithTheme(SubmitButton);