"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
/* eslint-disable react/no-children-prop */
/* eslint-disable @typescript-eslint/typedef */
const components_1 = require("@bluebase/components");
const react_native_1 = require("react-native");
const react_1 = tslib_1.__importDefault(require("react"));
// import defaultBackImage from '../assets/back-icon.png';
// tslint:disable-next-line: no-var-requires
const defaultBackImage = require('../../../assets/common/back-icon.png');
class HeaderBackButton extends react_1.default.PureComponent {
    constructor() {
        super(...arguments);
        this.state = {};
        this._onTextLayout = (e) => {
            if (this.state.initialTextWidth) {
                return;
            }
            this.setState({
                initialTextWidth: e.nativeEvent.layout.x + e.nativeEvent.layout.width,
            });
        };
        this._getTitleText = () => {
            const { width, title, truncatedTitle } = this.props;
            const { initialTextWidth } = this.state;
            if (title === null) {
                return null;
            }
            else if (!title) {
                return truncatedTitle;
            }
            else if (initialTextWidth && width && initialTextWidth > width) {
                return truncatedTitle;
            }
            else {
                return title;
            }
        };
    }
    _renderBackImage() {
        const { backImage, backTitleVisible } = this.props;
        const styles = this.props.styles;
        if (react_1.default.isValidElement(backImage)) {
            return backImage;
        }
        const tintColor = this.props.tintColor || styles.title.color;
        const stylesheet = [
            styles.icon,
            !!backTitleVisible && styles.iconWithTitle,
            !!tintColor && { tintColor },
        ];
        return react_1.default.createElement(react_native_1.Image, { source: defaultBackImage, style: stylesheet, fadeDuration: 0 });
    }
    _maybeRenderTitle() {
        const { allowFontScaling, backTitleVisible, titleStyle, tintColor } = this.props;
        const styles = this.props.styles;
        const backTitleText = this._getTitleText();
        if (!backTitleVisible || backTitleText === null) {
            return null;
        }
        return (react_1.default.createElement(react_native_1.Text, { accessible: false, onLayout: this._onTextLayout, style: [styles.title, !!tintColor && { color: tintColor }, titleStyle], numberOfLines: 1, allowFontScaling: !!allowFontScaling, testID: "header-back-title" }, this._getTitleText()));
    }
    render() {
        const { style, onPress, pressColorAndroid, title } = this.props;
        const styles = this.props.styles;
        // const wrapperStyles = [styles.wrapper];
        // if (style && Array.isArray(style)) {
        // 	wrapperStyles = [...wrapperStyles, ...style];
        // } else if (!!style) {
        // 	wrapperStyles.push(style);
        // }
        const button = (react_1.default.createElement(components_1.NavigationActions, { children: ({ goBack }) => (react_1.default.createElement(components_1.TouchableItem, { accessible: true, accessibilityRole: "button", accessibilityComponentType: "button", accessibilityLabel: title ? `${title}, back` : 'Go back', accessibilityTraits: "button", testID: "header-back", delayPressIn: 0, onPress: onPress || goBack, pressColor: pressColorAndroid, borderless: true, style: style },
                react_1.default.createElement(react_native_1.View, { testID: "header-back-wrapper", style: styles.wrapper },
                    this._renderBackImage(),
                    this._maybeRenderTitle()))) }));
        if (react_native_1.Platform.OS === 'android') {
            return (react_1.default.createElement(react_native_1.View, { testID: "header-android-wrapper", style: styles.androidButtonWrapper }, button));
        }
        else {
            return button;
        }
    }
}
exports.HeaderBackButton = HeaderBackButton;
HeaderBackButton.defaultProps = {
    defaultStyles: {},
    pressColorAndroid: 'rgba(0, 0, 0, .32)',
    truncatedTitle: 'Back',
};
HeaderBackButton.defaultStyles = (theme) => {
    const iconIosStyles = {
        backgroundColor: 'transparent',
        height: 21,
        marginLeft: 9,
        marginRight: 22,
        marginVertical: 12,
        resizeMode: 'contain',
        transform: [{ scaleX: react_native_1.I18nManager.isRTL ? -1 : 1 }],
        width: 13,
    };
    const iconDefaultStyles = {
        backgroundColor: 'transparent',
        height: 24,
        margin: 3,
        resizeMode: 'contain',
        transform: [{ scaleX: react_native_1.I18nManager.isRTL ? -1 : 1 }],
        width: 24,
    };
    return {
        androidButtonWrapper: {
            backgroundColor: 'transparent',
            margin: 13,
        },
        icon: react_native_1.Platform.OS === 'ios' ? iconIosStyles : iconDefaultStyles,
        iconWithTitle: react_native_1.Platform.OS === 'ios' ? { marginRight: 6 } : {},
        title: {
            // color: theme.palette.primary.contrastText,// || Platform.select({ ios: '#037aff' })
            color: theme.palette.text.secondary,
            fontSize: 17,
            paddingRight: 10,
        },
        wrapper: {
            alignItems: 'center',
            backgroundColor: 'transparent',
            flexDirection: 'row',
        },
    };
};
