import { View, Text, NativeModules } from 'react-native';
import React, { useEffect, useContext } from 'react';
import { CometChatImageBubble } from '../CometChatImageBubble';
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatContext } from '../../CometChatContext';
import { CometChatButton } from '../CometChatButton';
import { ButtonAction, HTTPSRequestMethods } from '../../constants/UIKitConstants';
import { CometChatNetworkUtils } from '../../utils/NetworkUtils';
import { CardBubbleStyle } from './CardBubbleStyle';
const WebView = NativeModules['WebViewManager'];
export const CometChatCardBubble = (props) => {
    const { message, onSubmitClick, style } = props;
    const { theme } = useContext(CometChatContext);
    const [loggedInUser, setLoggedInUser] = React.useState(null);
    const [interactedElements, setInteractedElements] = React.useState([]);
    const _style = new CardBubbleStyle({
        backgroundColor: theme.palette.getBackgroundColor(),
        borderRadius: 5,
        padding: 5,
        imageStyle: {
            aspectRatio: 16 / 9,
            width: "100%",
            borderRadius: 5,
        },
        imageResizeMode: 'cover',
        buttonStyle: {
            backgroundColor: theme.palette.getBackgroundColor(),
            border: { borderWidth: 0 },
            textColor: theme.palette.getPrimary(),
            textFont: { fontSize: 14 },
            height: 35,
            borderRadius: 0,
        },
        textColor: theme.palette.getAccent600(),
        ...style,
    });
    const { backgroundColor, borderRadius, buttonStyle, imageResizeMode, imageStyle, padding, textColor, textFont, } = _style;
    useEffect(() => {
        CometChat.getLoggedinUser()
            .then(u => {
            setLoggedInUser(u);
        })
            .catch(e => {
            console.log("Error while getting loggedInUser");
            setLoggedInUser(null);
        });
        setInteractedElements(message.getInteractions() || []);
    }, []);
    const _renderButton = (data, isSubmitElement) => {
        function onClick() {
            _handleButtonClick(data.getAction(), data.getElementId(), isSubmitElement);
        }
        function isDisabled() {
            let isSender = message.getSender()?.getUid() == loggedInUser?.['uid'];
            let allowInteraction = isSender ? message?.["data"]?.["allowSenderInteraction"] : true;
            let disableAfterInteracted;
            if (data.getDisableAfterInteracted()) {
                disableAfterInteracted = interactedElements?.some((element) => element.getElementId() === data.getElementId());
            }
            return (disableAfterInteracted || !allowInteraction);
        }
        return (<View style={{ borderTopWidth: 1, borderTopColor: theme.palette.getAccent100(), opacity: isDisabled() ? .5 : 1 }}>
        <CometChatButton onPress={isDisabled() ? () => { } : onClick} text={data.getButtonText()} style={{ ...buttonStyle, textColor: isDisabled() ? theme.palette.getAccent600() : buttonStyle.textColor }}/>
      </View>);
    };
    function markAsInteracted(elementId) {
        CometChat.markAsInteracted(message?.getId(), elementId).then((response) => {
            const interaction = new CometChat.Interaction(elementId, new Date().getTime());
            let clonedInteractedElements = [...interactedElements];
            clonedInteractedElements.push(interaction);
            setInteractedElements(clonedInteractedElements);
        })
            .catch((error) => {
            console.log("error while markAsInteracted", error);
        });
    }
    function _handleButtonClick(action, elementId, isSubmitElement) {
        if (isSubmitElement && onSubmitClick) {
            onSubmitClick(action.getPayload());
            return;
        }
        switch (action.getActionType()) {
            case ButtonAction.apiAction:
                CometChatNetworkUtils.fetcher({
                    url: action.getURL(),
                    method: action.getMethod() || HTTPSRequestMethods.POST,
                    body: { ...action.getPayload(), cometchatSenderUid: loggedInUser?.['uid'] || "" },
                    headers: action.getHeaders(),
                })
                    .then((response) => {
                    if (response.status === 200) {
                        markAsInteracted(elementId);
                    }
                })
                    .catch((error) => {
                    console.log("CometChatNetworkUtils.fetcher error", error);
                });
                break;
            case ButtonAction.urlNavigation:
                const url = action?.getURL();
                WebView.openUrl(url);
                markAsInteracted(elementId);
                break;
            case ButtonAction.custom:
                markAsInteracted(elementId);
                break;
            default:
                break;
        }
    }
    return (<View style={{ padding: 5 }}>
      <View style={{ backgroundColor, borderRadius, padding }}>
        {Boolean(message.getImageUrl()) &&
            <CometChatImageBubble imageUrl={{ uri: message.getImageUrl() }} thumbnailUrl={{ uri: message.getImageUrl() }} style={imageStyle} resizeMode={imageResizeMode}/>}
        <Text style={[textFont, { marginVertical: 10, color: textColor }]}>{message.getText()}</Text>
      </View>
      {(message.getCardActions())?.map((action, index) => <React.Fragment key={index}>{_renderButton(action)}</React.Fragment>)}
    </View>);
};
//# sourceMappingURL=CometChatCardBubble.js.map