import React, { ReactNode } from 'react';
import { StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'
import EntypoIcon from 'react-native-vector-icons/Entypo'
import Icon from 'react-native-vector-icons/Ionicons';

import { Strings } from '../../resources/localization/Strings';

export interface IStyleHeaderView {
    containerStyle: ViewStyle;
    textStyle: TextStyle;
    iconStyle: TextStyle;
}

export interface IStyleSendingExtraView {
    containerStyle: ViewStyle;
    textStyle: TextStyle;
    msgStyle?: TextStyle;
}

export const messageHeaderView = (icon: ReactNode, style: IStyleHeaderView, msgType: string) => {
    return (
        <View style={style.containerStyle}>
            {icon}
            <Text style={style.textStyle}>{msgType}</Text>
        </View>
    );
};

export const deletedMessageView = () => {
    return <View>
        <View style={defaultInternalStyle.deletedMessageView}>
            <Text style={defaultInternalStyle.deletedMessageText}>{Strings.deletedMessage}</Text>
        </View>
    </View> as React.ReactElement;
};

export const repliedMessageView = (msg: string, user: string, anyProps: any) => {
    return <View>
        <View style={defaultInternalStyle.repliedMessageView}>
            <Text style={defaultInternalStyle.repliedMessageUser}>{user}</Text>
            <Text style={defaultInternalStyle.repliedMessageText}>{msg}</Text>
        </View>
        {anyProps}
    </View> as React.ReactElement;
};

export const systemMessageView = (msg: string) => (
    <View style={defaultInternalStyle.systemMessageView}>
        <Text style={defaultInternalStyle.systemMessageText}>{msg}</Text>
    </View>
);

export const sendingExtraView = (title: string, onClose: () => void, style: IStyleSendingExtraView, msg?: string,) => (
    <View style={style.containerStyle}>
        <Text style={style.textStyle}>{title}</Text>
        <Text style={style.msgStyle ?? style.textStyle}>{msg}</Text>
        {closeIcon(onClose)}
    </View>
);

const closeIcon = (onClose: () => void) => (
    <Icon name="close-circle" style={defaultInternalStyle.closeIconStyle} onPress={onClose} />
);

export const messageTypesIcon = () => (<FontAwesomeIcon style={defaultInternalStyle.msgActionStyle} name="exclamation" />);

export const attachIcon = () => (<EntypoIcon name="attachment" style={defaultInternalStyle.msgActionStyle} />);


const defaultInternalStyle = StyleSheet.create({
    isTypingThumbnail: { width: 25, height: 25, borderRadius: 15, marginLeft: 2 },
    isTypingText: { alignSelf: 'center' },
    isTypingContainer: { flexDirection: 'row', padding: 2 },
    thumbnailContainer: { width: 25, height: 25, borderRadius: 15, justifyContent: 'center', alignItems: 'center', marginLeft: 2 },
    imageTextStyle: { fontSize: 10, color: 'white', },
    msgActionStyle: { fontSize: 35, color: '#3f8df5' },
    selectedAttachedFilesContainer: { flexDirection: 'column', width: 100, height: 100, alignItems: 'center', marginEnd: 10 },
    cancelUploadIcon: { position: 'absolute', top: -2, right: 0, zIndex: 1 },
    fileLogo: { width: 80, height: 80 },
    fileName: { fontSize: 12 },
    attachedImage: { width: 100, height: 100, marginEnd: 10 },
    systemMessageView: { justifyContent: 'center', alignItems: 'center', margin: 5 },
    systemMessageText: { fontSize: 12, color: '#C0C0C0' },
    closeIconStyle: { color: 'gray', position: 'absolute', top: -10, right: 0 },
    filesToUploadContainer: { backgroundColor: '#DCDCDC', minHeight: 40, padding: 10, flexDirection: 'row' },
    deletedMessageView: { padding: 10, borderRadius: 10 },
    deletedMessageText: { color: '#C0C0C0', fontWeight: 'bold', fontSize: 15 },
    repliedMessageView: { padding: 10, backgroundColor: '#fdeed9', borderRadius: 10 },
    repliedMessageUser: { color: '#e3902b', fontWeight: 'bold', fontSize: 15 },
    repliedMessageText: { fontSize: 15 },
    attachedLoading: { position: 'absolute', top: '20%', left: '30%' },
});