/* eslint-disable @typescript-eslint/no-explicit-any */

import React from 'react';
import type { TextStyle, ViewStyle } from 'react-native';
import { Text, View } from 'react-native';
import URL from 'url-parse';
import { withTheme } from '../../branding';
import type { ThemeProps } from '../../branding/hoc/types';
import PendingIcon from './PendingIcon';
import type { Styles } from './styles';
import themedStyles from './styles';
import { formatUpperCase } from '../../i18n';

export interface Props {
    url: string;
    backgroundStyle: ViewStyle;
    urlStyle: TextStyle;
}

export const PendingSocialAccount = ({
    url,
    backgroundStyle,
    urlStyle,
    theme
}: Props & ThemeProps) => {
    const styles = (themedStyles as any)[theme] as Styles;
    const urlObject = new URL(url);
    const urlPath = `@${urlObject.pathname?.substring?.(1) ?? ''}`;
    const pendingUpdateText = formatUpperCase(
        'participant.manageLinkedAccounts.pendingUpdate'
    );
    return (
        <View style={[backgroundStyle, styles.container]}>
            <PendingIcon />
            <Text style={styles.pending}>{pendingUpdateText}</Text>
            <Text
                style={[urlStyle, styles.link]}
                numberOfLines={1}
                ellipsizeMode="tail"
            >
                {urlPath}
            </Text>
        </View>
    );
};

export default withTheme(PendingSocialAccount) as React.FC<Props>;