"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const prop_types_1 = __importDefault(require("prop-types"));
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const QuickReplies_1 = __importDefault(require("./QuickReplies"));
const MessageText_1 = __importDefault(require("./MessageText"));
const MessageImage_1 = __importDefault(require("./MessageImage"));
const MessageVideo_1 = __importDefault(require("./MessageVideo"));
const MessageAudio_1 = __importDefault(require("./MessageAudio"));
const MessagePolls_1 = __importDefault(require("./MessagePolls"));
const Time_1 = __importDefault(require("./Time"));
const Color_1 = __importDefault(require("./Color"));
const utils_1 = require("./utils");
const styles = {
    left: react_native_1.StyleSheet.create({
        container: {
            flex: 1,
            alignItems: 'flex-start',
        },
        wrapper: {
            borderRadius: 15,
            backgroundColor: Color_1.default.leftBubbleBackground,
            marginRight: 60,
            minHeight: 20,
            justifyContent: 'flex-end',
        },
        containerToNext: {
            borderBottomLeftRadius: 3,
        },
        containerToPrevious: {
            borderTopLeftRadius: 3,
        },
        bottom: {
            flexDirection: 'row',
            justifyContent: 'flex-start',
        },
    }),
    right: react_native_1.StyleSheet.create({
        container: {
            flex: 1,
            alignItems: 'flex-end',
        },
        wrapper: {
            borderRadius: 15,
            backgroundColor: Color_1.default.defaultBlue,
            marginLeft: 60,
            minHeight: 20,
            justifyContent: 'flex-end',
        },
        containerToNext: {
            borderBottomRightRadius: 3,
        },
        containerToPrevious: {
            borderTopRightRadius: 3,
        },
        bottom: {
            flexDirection: 'row',
            justifyContent: 'flex-end',
        },
    }),
    content: react_native_1.StyleSheet.create({
        tick: {
            fontSize: 10,
            backgroundColor: Color_1.default.backgroundTransparent,
            color: Color_1.default.white,
        },
        tickView: {
            flexDirection: 'row',
            marginRight: 10,
        },
        username: {
            top: -3,
            left: 0,
            fontSize: 12,
            backgroundColor: 'transparent',
            color: '#aaa',
        },
        usernameView: {
            flexDirection: 'row',
            marginHorizontal: 10,
        },
    }),
};
const DEFAULT_OPTION_TITLES = ['Copy Text', 'Cancel'];
class Bubble extends react_1.default.Component {
    constructor() {
        super(...arguments);
        this.onPress = () => {
            if (this.props.onPress) {
                this.props.onPress(this.context, this.props.currentMessage);
            }
        };
        this.onLongPress = () => {
            const { currentMessage } = this.props;
            if (this.props.onLongPress) {
                this.props.onLongPress(this.context, this.props.currentMessage);
            }
            else if (currentMessage && currentMessage.text) {
                const { optionTitles } = this.props;
                const options = optionTitles && optionTitles.length > 0
                    ? optionTitles.slice(0, 2)
                    : DEFAULT_OPTION_TITLES;
                const cancelButtonIndex = options.length - 1;
                this.context.actionSheet().showActionSheetWithOptions({
                    options,
                    cancelButtonIndex,
                }, (buttonIndex) => {
                    switch (buttonIndex) {
                        case 0:
                            react_native_1.Clipboard.setString(currentMessage.text);
                            break;
                        default:
                            break;
                    }
                });
            }
        };
    }
    styledBubbleToNext() {
        const { currentMessage, nextMessage, position, containerToNextStyle } = this.props;
        if (currentMessage &&
            nextMessage &&
            position &&
            utils_1.isSameUser(currentMessage, nextMessage) &&
            utils_1.isSameDay(currentMessage, nextMessage)) {
            return [
                styles[position].containerToNext,
                containerToNextStyle && containerToNextStyle[position],
            ];
        }
        return null;
    }
    styledBubbleToPrevious() {
        const { currentMessage, previousMessage, position, containerToPreviousStyle, } = this.props;
        if (currentMessage &&
            previousMessage &&
            position &&
            utils_1.isSameUser(currentMessage, previousMessage) &&
            utils_1.isSameDay(currentMessage, previousMessage)) {
            return [
                styles[position].containerToPrevious,
                containerToPreviousStyle && containerToPreviousStyle[position],
            ];
        }
        return null;
    }
    renderQuickReplies() {
        const { currentMessage, onQuickReply, nextMessage, renderQuickReplySend, quickReplyStyle, } = this.props;
        if (currentMessage && currentMessage.quickReplies) {
            const _a = this.props, { containerStyle, wrapperStyle } = _a, quickReplyProps = __rest(_a, ["containerStyle", "wrapperStyle"]);
            if (this.props.renderQuickReplies) {
                return this.props.renderQuickReplies(quickReplyProps);
            }
            return (react_1.default.createElement(QuickReplies_1.default, Object.assign({}, {
                currentMessage,
                onQuickReply,
                nextMessage,
                renderQuickReplySend,
                quickReplyStyle,
            })));
        }
        return null;
    }
    renderMessageText() {
        if (this.props.currentMessage && this.props.currentMessage.text) {
            const _a = this.props, { containerStyle, wrapperStyle, optionTitles } = _a, messageTextProps = __rest(_a, ["containerStyle", "wrapperStyle", "optionTitles"]);
            if (this.props.renderMessageText) {
                return this.props.renderMessageText(messageTextProps);
            }
            return react_1.default.createElement(MessageText_1.default, Object.assign({}, messageTextProps));
        }
        return null;
    }
    renderPollMessage() {
        if (this.props.currentMessage && this.props.currentMessage.polls) {
            const _a = this.props, { containerStyle, wrapperStyle } = _a, messagePollsProps = __rest(_a, ["containerStyle", "wrapperStyle"]);
            if (this.props.renderPollMessage) {
                return this.props.renderMessageImage(messagePollsProps);
            }
            return (react_1.default.createElement(MessagePolls_1.default, { containerStyle: containerStyle, polls: messagePollsProps.currentMessage.polls }));
        }
        return null;
    }
    renderMessageImage() {
        if (this.props.currentMessage && this.props.currentMessage.image) {
            const _a = this.props, { containerStyle, wrapperStyle } = _a, messageImageProps = __rest(_a, ["containerStyle", "wrapperStyle"]);
            if (this.props.renderMessageImage) {
                return this.props.renderMessageImage(messageImageProps);
            }
            return react_1.default.createElement(MessageImage_1.default, Object.assign({}, messageImageProps));
        }
        return null;
    }
    renderMessageVideo() {
        if (this.props.currentMessage && this.props.currentMessage.video) {
            const _a = this.props, { containerStyle, wrapperStyle } = _a, messageVideoProps = __rest(_a, ["containerStyle", "wrapperStyle"]);
            if (this.props.renderMessageVideo) {
                return this.props.renderMessageVideo(messageVideoProps);
            }
            return react_1.default.createElement(MessageVideo_1.default, Object.assign({}, messageVideoProps));
        }
        return null;
    }
    renderMessageAudio() {
        if (this.props.currentMessage && this.props.currentMessage.audio) {
            const _a = this.props, { containerStyle, wrapperStyle } = _a, messageAudioProps = __rest(_a, ["containerStyle", "wrapperStyle"]);
            if (this.props.renderMessageAudio) {
                return this.props.renderMessageAudio(messageAudioProps);
            }
            return react_1.default.createElement(MessageAudio_1.default, Object.assign({}, messageAudioProps));
        }
        return null;
    }
    renderTicks() {
        const { currentMessage, renderTicks, user } = this.props;
        if (renderTicks && currentMessage) {
            return renderTicks(currentMessage);
        }
        if (currentMessage &&
            user &&
            currentMessage.user &&
            currentMessage.user._id !== user._id) {
            return null;
        }
        if (currentMessage &&
            (currentMessage.sent ||
                currentMessage.received ||
                currentMessage.pending)) {
            return (react_1.default.createElement(react_native_1.View, { style: styles.content.tickView },
                !!currentMessage.sent && (react_1.default.createElement(react_native_1.Text, { style: [styles.content.tick, this.props.tickStyle] }, "\u2713")),
                !!currentMessage.received && (react_1.default.createElement(react_native_1.Text, { style: [styles.content.tick, this.props.tickStyle] }, "\u2713")),
                !!currentMessage.pending && (react_1.default.createElement(react_native_1.Text, { style: [styles.content.tick, this.props.tickStyle] }, "\uD83D\uDD53"))));
        }
        return null;
    }
    renderTime() {
        if (this.props.currentMessage && this.props.currentMessage.createdAt) {
            const _a = this.props, { containerStyle, wrapperStyle, textStyle } = _a, timeProps = __rest(_a, ["containerStyle", "wrapperStyle", "textStyle"]);
            if (this.props.renderTime) {
                return this.props.renderTime(timeProps);
            }
            return react_1.default.createElement(Time_1.default, Object.assign({}, timeProps));
        }
        return null;
    }
    renderUsername() {
        const { currentMessage, user } = this.props;
        if (this.props.renderUsernameOnMessage && currentMessage) {
            if (user && currentMessage.user._id === user._id) {
                return null;
            }
            return (react_1.default.createElement(react_native_1.View, { style: styles.content.usernameView },
                react_1.default.createElement(react_native_1.Text, { style: [
                        styles.content.username,
                        this.props.usernameStyle,
                    ] },
                    "~ ",
                    currentMessage.user.name)));
        }
        return null;
    }
    renderCustomView() {
        if (this.props.renderCustomView) {
            return this.props.renderCustomView(this.props);
        }
        return null;
    }
    renderBubbleContent() {
        return this.props.isCustomViewBottom ? (react_1.default.createElement(react_native_1.View, null,
            this.renderMessageImage(),
            this.renderMessageVideo(),
            this.renderMessageAudio(),
            this.renderMessageText(),
            this.renderPollMessage(),
            this.renderCustomView())) : (react_1.default.createElement(react_native_1.View, null,
            this.renderCustomView(),
            this.renderMessageImage(),
            this.renderMessageVideo(),
            this.renderMessageAudio(),
            this.renderMessageText(),
            this.renderPollMessage()));
    }
    render() {
        const { position, containerStyle, wrapperStyle, bottomContainerStyle } = this.props;
        return (react_1.default.createElement(react_native_1.View, { style: [
                styles[position].container,
                containerStyle && containerStyle[position],
            ] },
            react_1.default.createElement(react_native_1.View, { style: [
                    styles[position].wrapper,
                    this.styledBubbleToNext(),
                    this.styledBubbleToPrevious(),
                    wrapperStyle && wrapperStyle[position],
                ] },
                react_1.default.createElement(react_native_1.TouchableWithoutFeedback, Object.assign({ onPress: this.onPress, onLongPress: this.onLongPress, accessibilityLabel: "text" }, this.props.touchableProps),
                    react_1.default.createElement(react_native_1.View, null,
                        this.renderBubbleContent(),
                        react_1.default.createElement(react_native_1.View, { style: [
                                styles[position].bottom,
                                bottomContainerStyle &&
                                    bottomContainerStyle[position],
                            ] },
                            this.renderUsername(),
                            this.renderTime(),
                            this.renderTicks())))),
            this.renderQuickReplies()));
    }
}
exports.default = Bubble;
Bubble.contextTypes = {
    actionSheet: prop_types_1.default.func,
};
Bubble.defaultProps = {
    touchableProps: {},
    onPress: null,
    onLongPress: null,
    renderMessageImage: null,
    renderMessageVideo: null,
    renderMessageAudio: null,
    renderMessageText: null,
    renderCustomView: null,
    renderUsername: null,
    renderTicks: null,
    renderTime: null,
    renderQuickReplies: null,
    onQuickReply: null,
    position: 'left',
    optionTitles: DEFAULT_OPTION_TITLES,
    currentMessage: {
        text: null,
        createdAt: null,
        image: null,
    },
    nextMessage: {},
    previousMessage: {},
    containerStyle: {},
    wrapperStyle: {},
    bottomContainerStyle: {},
    tickStyle: {},
    usernameStyle: {},
    containerToNextStyle: {},
    containerToPreviousStyle: {},
};
Bubble.propTypes = {
    user: prop_types_1.default.object.isRequired,
    touchableProps: prop_types_1.default.object,
    onLongPress: prop_types_1.default.func,
    renderMessageImage: prop_types_1.default.func,
    renderMessageVideo: prop_types_1.default.func,
    renderMessageAudio: prop_types_1.default.func,
    renderMessageText: prop_types_1.default.func,
    renderCustomView: prop_types_1.default.func,
    isCustomViewBottom: prop_types_1.default.bool,
    renderUsernameOnMessage: prop_types_1.default.bool,
    renderUsername: prop_types_1.default.func,
    renderTime: prop_types_1.default.func,
    renderTicks: prop_types_1.default.func,
    renderQuickReplies: prop_types_1.default.func,
    onQuickReply: prop_types_1.default.func,
    position: prop_types_1.default.oneOf(['left', 'right']),
    optionTitles: prop_types_1.default.arrayOf(prop_types_1.default.string),
    currentMessage: prop_types_1.default.object,
    nextMessage: prop_types_1.default.object,
    previousMessage: prop_types_1.default.object,
    containerStyle: prop_types_1.default.shape({
        left: utils_1.StylePropType,
        right: utils_1.StylePropType,
    }),
    wrapperStyle: prop_types_1.default.shape({
        left: utils_1.StylePropType,
        right: utils_1.StylePropType,
    }),
    bottomContainerStyle: prop_types_1.default.shape({
        left: utils_1.StylePropType,
        right: utils_1.StylePropType,
    }),
    tickStyle: utils_1.StylePropType,
    usernameStyle: utils_1.StylePropType,
    containerToNextStyle: prop_types_1.default.shape({
        left: utils_1.StylePropType,
        right: utils_1.StylePropType,
    }),
    containerToPreviousStyle: prop_types_1.default.shape({
        left: utils_1.StylePropType,
        right: utils_1.StylePropType,
    }),
};
//# sourceMappingURL=Bubble.js.map