import React, { useContext, useEffect, useRef } from "react";
import { View, Text, NativeModules, } from "react-native";
import { CometChatContext } from "../../CometChatContext";
// Style Components import
import { FormBubbleStyle } from "./FormBubbleStyle";
import { ButtonAction, ElementType, HTTPSRequestMethods, goalType } from "../../constants/UIKitConstants";
import CometChatDropdown from "../CometChatDropDown/CometChatDropDown";
import { CometChatNetworkUtils } from "../../utils/NetworkUtils";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import CometChatTextInput from "../CometChatTextInput/CometChatTextInput";
import CometChatCheckBox from "../CometChatCheckBox/CometChatCheckBox";
import CometChatRadioButton from "../CometChatRadioButton/CometChatRadioButton";
import CometChatSingleSelect from "../CometChatSingleSelect/CometChatSingleSelect";
import CometChatQuickView from "../CometChatQuickView/CometChatQuickView";
import { localize } from "../../resources";
import { memo } from "react";
import { ButtonStyle, CometChatButton } from "../CometChatButton";
import CometChatLabel from "../CometChatLabel/CometChatLabel";
import { CometChatDateTimePicker } from "../CometChatDateTimePicker";
import { CometChatUIKit } from "../../CometChatUiKit";
import { CometChatUiKitConstants } from "../..";
const WebView = NativeModules['WebViewManager'];
const { TimeZoneCodeManager } = NativeModules;
let allRequiredFields = [];
export const CometChatFormBubble = memo((props) => {
    const { message, onSubmitClick, style } = props;
    const { theme } = useContext(CometChatContext);
    const [currentRequiredFields, setCurrentRequiredFields] = React.useState([]);
    const [bodyData, setBodyData] = React.useState({});
    const [hasInteractionCompleted, setHasInteractionCompleted] = React.useState(false);
    const [interactedElements, setInteractedElements] = React.useState([]);
    const [interactionGoal, setInteractionGoal] = React.useState(undefined);
    const [loaderButton, setLoaderButton] = React.useState("");
    const [loggedInUser, setLoggedInUser] = React.useState(null);
    const currentTimeZoneRef = useRef("");
    const _style = new FormBubbleStyle({
        wrapperPadding: 3,
        titleFont: { ...theme.typography.heading2, fontWeight: '400' },
        titleColor: theme.palette.getAccent(),
        goalCompletionTextColor: theme.palette.getAccent600(),
        backgroundColor: theme.palette.getBackgroundColor(),
        wrapperBackground: theme.palette.getSecondary(),
        wrapperBorderRadius: 10,
        buttonStyle: new ButtonStyle({
            backgroundColor: theme.palette.getPrimary(),
            border: { borderWidth: 1, borderColor: theme.palette.getAccent200() },
            textColor: theme.palette.getBackgroundColor(),
            textFont: theme.typography.text1,
            height: 35,
            borderRadius: 5,
        }),
        // Add relevant style properties
        ...style
    });
    const { backgroundColor, border, borderRadius, goalCompletionTextColor, goalCompletionTextFont, titleColor, titleFont, wrapperBackground, wrapperBorderRadius, wrapperPadding, buttonStyle, checkboxStyle, dropdownStyle, labelStyle, quickViewStyle, radioButtonStyle, singleSelectStyle, textInputStyle, datePickerStyle
    // Extract style properties
     } = _style;
    useEffect(() => {
        CometChat.getLoggedinUser()
            .then(u => {
            setLoggedInUser(u);
        })
            .catch(e => {
            console.log("Error while getting loggedInUser");
            setLoggedInUser(null);
        });
        TimeZoneCodeManager.getCurrentTimeZone((timeZone) => {
            currentTimeZoneRef.current = timeZone;
        });
        setInteractedElements(message.getInteractions() || []);
        setInteractionGoal(message.getInteractionGoal() || undefined);
        let formFields = {};
        message.getFormFields().forEach((field) => {
            formFields[field.getElementId()] = (field?.getDefaultValue && field?.getDefaultValue()) || "";
        });
        setBodyData(formFields);
    }, []);
    useEffect(() => {
        let hasInteractionCompleted = checkHasInteractionCompleted();
        setHasInteractionCompleted(hasInteractionCompleted);
    }, [interactedElements, interactionGoal]);
    const _renderTextInput = (data) => {
        !data.getOptional() && allRequiredFields.push(data.getElementId());
        function onChange(text) {
            setBodyData({ ...bodyData, [data.getElementId()]: text });
            if (text.length > 0) {
                removeFromRequiredList(data.getElementId());
            }
        }
        return (<CometChatTextInput data={data} showError={currentRequiredFields.includes(data.getElementId())} onChange={onChange} style={textInputStyle} defaultValue={bodyData[data.getElementId()]}/>);
    };
    const _renderCheckBox = (data) => {
        !data.getOptional() && allRequiredFields.push(data.getElementId());
        function onChange(option) {
            let _cloneBodydata = { ...bodyData };
            _cloneBodydata[data.getElementId()] = _cloneBodydata[data.getElementId()] || [];
            let indexOfOption = _cloneBodydata[data.getElementId()].indexOf(option.getValue());
            if (indexOfOption > -1) {
                _cloneBodydata[data.getElementId()].splice(indexOfOption, 1);
            }
            else {
                _cloneBodydata[data.getElementId()].push(option.getValue());
            }
            setBodyData({ ..._cloneBodydata });
            if (_cloneBodydata[data.getElementId()].length > 0) {
                removeFromRequiredList(data.getElementId());
            }
        }
        return (<CometChatCheckBox data={data} showError={currentRequiredFields.includes(data.getElementId())} onChange={onChange} selectedOptions={bodyData[data.getElementId()] || []} style={checkboxStyle}/>);
    };
    const _renderRadio = (data) => {
        !data.getOptional() && allRequiredFields.push(data.getElementId());
        function onChange(value) {
            setBodyData({ ...bodyData, [data.getElementId()]: value });
            removeFromRequiredList(data.getElementId());
        }
        return (<CometChatRadioButton data={data} onChange={onChange} selectedOption={bodyData[data.getElementId()]} showError={currentRequiredFields.includes(data.getElementId())} style={radioButtonStyle}/>);
    };
    const _renderSingleElement = (data) => {
        !data.getOptional() && allRequiredFields.push(data.getElementId());
        function onChange(value) {
            setBodyData({ ...bodyData, [data.getElementId()]: value });
            removeFromRequiredList(data.getElementId());
        }
        return (<CometChatSingleSelect data={data} onChange={onChange} selectedOption={bodyData[data.getElementId()]} showError={currentRequiredFields.includes(data.getElementId())} style={singleSelectStyle}/>);
    };
    const _returnDropDown = (data) => {
        !data.getOptional() && allRequiredFields.push(data.getElementId());
        function onChange(value) {
            setBodyData({ ...bodyData, [data.getElementId()]: value });
            removeFromRequiredList(data.getElementId());
        }
        return <CometChatDropdown options={data.getOptions()} onOptionChange={onChange} data={data} showError={currentRequiredFields.includes(data.getElementId())} selectedOption={bodyData[data.getElementId()]} style={dropdownStyle}/>;
    };
    const _renderButton = (data, isSubmitElement) => {
        function onClick() {
            console.log("ElemId", data.getElementId(), interactedElements);
            _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={{ opacity: isDisabled() ? .5 : 1, marginVertical: 8 }}>
                <CometChatButton onPress={isDisabled() ? () => { } : onClick} text={data.getButtonText()} style={buttonStyle} isLoading={loaderButton === data.getElementId()}/>
            </View>);
    };
    const _renderLabel = (data) => {
        return (<CometChatLabel text={data.getText()} style={labelStyle}/>);
    };
    const _renderDateTimePicker = (data) => {
        !data.getOptional() && allRequiredFields.push(data.getElementId());
        function onChange(time) {
            setBodyData({ ...bodyData, [data.getElementId()]: time });
            if (time) {
                removeFromRequiredList(data.getElementId());
            }
        }
        return (<CometChatDateTimePicker data={data} style={datePickerStyle} showError={currentRequiredFields.includes(data.getElementId())} onChange={onChange}/>);
    };
    const renderField = (field) => {
        switch (field.getElementType()) {
            case ElementType.label:
                // Render label
                return _renderLabel(field);
            case ElementType.text:
                // Render text input
                return _renderTextInput(field);
            case ElementType.dropdown:
                // Render dropdown
                return _returnDropDown(field);
            case ElementType.checkbox:
                // Render checkbox
                return _renderCheckBox(field);
            case ElementType.radio:
                // Render radio button
                return _renderRadio(field);
            case ElementType.singleSelect:
                // Render radio button
                return _renderSingleElement(field);
            case ElementType.button:
                // Render button
                return _renderButton(field);
            case ElementType.dateTime:
                // Render dateTimepicker
                return _renderDateTimePicker(field);
            // Handle other cases
            default:
                return null;
        }
    };
    const filledRequiredFields = () => {
        let _requiredFields = [];
        for (let key in bodyData) {
            if ((Array.isArray(bodyData[key]) && bodyData[key].length === 0) || !bodyData[key]) {
                if (allRequiredFields.includes(key)) {
                    _requiredFields.push(key);
                }
            }
        }
        if (_requiredFields.length > 0) {
            setCurrentRequiredFields(_requiredFields);
            return false;
        }
        else {
            return true;
        }
    };
    async function _handleButtonClick(action, elementId, isSubmitElement) {
        let conversation = await CometChat.CometChatHelper.getConversationFromMessage(message).then((conversation) => {
            return conversation;
        }, (error) => {
            console.log("Error while converting message object", error);
            return undefined;
        });
        if (isSubmitElement && onSubmitClick) {
            const dataKey = action?.getDataKey() || "CometChatData";
            let payload = action.getPayload() || {};
            if (!(typeof payload === "object")) {
                payload = {};
            }
            payload[dataKey] = { ...bodyData };
            onSubmitClick(payload);
            return;
        }
        switch (action.getActionType()) {
            case ButtonAction.apiAction:
                if (filledRequiredFields()) {
                    let uiKitSettings = CometChatUIKit.uiKitSettings;
                    let body = {
                        appID: uiKitSettings.appId,
                        trigger: "ui_message_interacted",
                        region: uiKitSettings.region,
                        payload: {},
                        data: {},
                    };
                    let payload = action.getPayload() || {};
                    body.payload = payload;
                    body.data = {
                        messageId: message.id,
                        conversationId: conversation.conversationId,
                        receiver: message.getSender().getUid(),
                        messageType: CometChatUiKitConstants.MessageTypeConstants.form,
                        messageCategory: CometChatUiKitConstants.MessageCategoryConstants.interactive,
                        receiverType: message?.getReceiverType(),
                        interactedBy: loggedInUser.uid,
                        interactionTimezoneCode: currentTimeZoneRef.current,
                        sender: loggedInUser.uid,
                        formData: bodyData
                    };
                    setLoaderButton(elementId);
                    CometChatNetworkUtils.fetcher({
                        url: action.getURL(),
                        method: action.getMethod() || HTTPSRequestMethods.POST,
                        body,
                        headers: action.getHeaders(),
                    })
                        .then((response) => {
                        if (response.status === 200) {
                            markAsInteracted(elementId);
                        }
                    })
                        .catch((error) => {
                        setLoaderButton("");
                        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;
        }
    }
    const checkHasInteractionCompleted = () => {
        let completed = false;
        let neededInteractionElement = interactionGoal?.getElementIds() || [];
        let neededInteractionElementCondition = interactionGoal?.getType() || "";
        let _interactedElements = [...interactedElements] || [];
        switch (neededInteractionElementCondition) {
            case goalType.anyOf:
                completed = _interactedElements.find((element) => neededInteractionElement.includes(element.getElementId()))
                    ? true
                    : false;
                break;
            case goalType.anyAction:
                completed = _interactedElements.length > 0 ? true : false;
                break;
            case goalType.allOf:
                completed = neededInteractionElement.every((element) => _interactedElements.find((interaction) => interaction.getElementId() === element))
                    ? true
                    : false;
                break;
            case goalType.none:
                completed = false;
                break;
            default:
                completed = false;
                break;
        }
        return completed;
    };
    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);
            setLoaderButton("");
        })
            .catch((error) => {
            console.log("error while markAsInteracted", error);
        });
    }
    const removeFromRequiredList = (elementId) => {
        if (currentRequiredFields.includes(elementId)) {
            setCurrentRequiredFields(currentRequiredFields.filter((field) => field !== elementId));
        }
    };
    return <View style={{
            padding: wrapperPadding,
            flex: 1,
            borderRadius: wrapperBorderRadius,
            backgroundColor: wrapperBackground,
        }}>
        {hasInteractionCompleted ?
            <View style={{ padding: 5 }}>
                <CometChatQuickView title={message.getSender()?.getName()} subtitle={message.getTitle()} quickViewStyle={quickViewStyle}/>
                <Text style={[{ marginTop: 10, color: goalCompletionTextColor }, goalCompletionTextFont]}>{message.getGoalCompletionText() || localize("FORM_COMPLETION_MESSAGE")}</Text>
            </View>
            :
                <View style={{
                        backgroundColor: backgroundColor,
                        borderRadius: borderRadius, ...border
                    }}>
                    {Boolean(message.getTitle()) &&
                        <View style={{
                                padding: 15,
                                borderBottomWidth: 0.6,
                                borderBottomColor: theme.palette.getAccent200(),
                            }}>
                            <Text style={[
                                {
                                    color: titleColor,
                                },
                                titleFont,
                            ]}>{message.getTitle()}</Text>
                        </View>}
                <View style={{ padding: 12 }}>
                    {message.getFormFields().map((item) => {
                        return renderField(item);
                    })}
                    {message.getSubmitElement() && _renderButton(message.getSubmitElement(), true)}
                </View>
            </View>}
    </View>;
});
CometChatFormBubble.defaultProps = {
    message: {}
};
//# sourceMappingURL=CometChatFormBubble.js.map