import React from 'react';
import type { ReactNode } from 'react';
import type { ViewStyle } from 'react-native';
import { Text, View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder';
import { useTheme } from '../../../branding';
import ChevRightIcon from '../../../components/Icons/ChevRightIcon';
import InformationIcon from '../../../components/Icons/InformationIcon/InformationIcon';
import TouchableOpacity from '../../../components/TouchableOpacity';
import themedStyles from './styles';

const ShimmerPlaceholder = createShimmerPlaceholder(LinearGradient);

const NOOP = () => {};

interface AccountPreferenceRowProps {
    label: string;
    loading: boolean;
    skeletonStyle: ViewStyle;
    onInfoPress?: () => void;
    infoTestID?: string;
    canEdit?: boolean;
    onEdit?: () => void;
    editTestID?: string;
    children?: ReactNode;
}

const AccountPreferenceRow = ({
    label,
    loading,
    skeletonStyle,
    onInfoPress,
    infoTestID,
    canEdit = false,
    onEdit,
    editTestID,
    children
}: AccountPreferenceRowProps) => {
    const { theme, typography, colors } = useTheme();
    const styles = themedStyles[theme];
    const shimmerColors = [
        colors.midnight850,
        colors.midnight750,
        colors.midnight850
    ];

    const rowContent = (
        <>
            <Text style={[typography.body1DS, styles.sectionItemText]}>
                {label}
            </Text>
            <View style={styles.row}>
                {loading ? (
                    <ShimmerPlaceholder
                        shimmerStyle={skeletonStyle}
                        shimmerColors={shimmerColors}
                    />
                ) : (
                    children
                )}
                {canEdit ? (
                    <ChevRightIcon color={colors.midnight200} />
                ) : (
                    <TouchableOpacity
                        testID={infoTestID}
                        disabled={loading}
                        onPress={onInfoPress ?? NOOP}
                    >
                        <InformationIcon color={colors.midnight200} />
                    </TouchableOpacity>
                )}
            </View>
        </>
    );

    if (canEdit) {
        return (
            <TouchableOpacity
                testID={editTestID}
                style={styles.sectionItem}
                disabled={loading}
                onPress={onEdit ?? NOOP}
            >
                {rowContent}
            </TouchableOpacity>
        );
    }

    return <View style={styles.sectionItem}>{rowContent}</View>;
};

export default AccountPreferenceRow;