"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const index_1 = require("../../index");
const react_native_1 = require("react-native");
const react_1 = tslib_1.__importDefault(require("react"));
const getAppBarHeight = (isLandscape) => {
    return react_native_1.Platform.OS === 'ios'
        ? isLandscape
            // && !Platform.isPad
            ? 32
            : 44
        : 56;
};
/**
 * 🎩 Header
 */
class Header extends react_1.default.PureComponent {
    constructor() {
        // static get HEIGHT() {
        // 	return APPBAR_HEIGHT + STATUSBAR_HEIGHT;
        // }
        super(...arguments);
        this.state = {};
        this._renderTitle = (_options) => {
            const { headerTitle, headerTitleContainerStyle, headerTitleStyle: titleStyle, headerTintColor: color, headerTitleAllowFontScaling: allowFontScaling, layoutPreset, } = this.props;
            const styles = this.props.styles;
            // If headerTitle is a react element, return it
            const HeaderTitleComponent = (headerTitle && typeof headerTitle !== 'string')
                ? headerTitle
                : index_1.HeaderTitle;
            if (react_1.default.isValidElement(HeaderTitleComponent)) {
                return HeaderTitleComponent;
            }
            // Resolve header title string
            const titleString = this._getHeaderTitleString();
            // When title is centered, the width of left/right components depends on the
            // calculated size of the title.
            const onLayout = (layoutPreset === 'center')
                ? (e) => { this.setState({ titleWidth: e.nativeEvent.layout.width }); }
                : undefined;
            // Styles
            const containerStyles = [
                styles.title,
                { justifyContent: layoutPreset === 'center' ? 'center' : 'flex-start' },
                // layoutPreset ? getTitleOffsets(layoutPreset, options.hasLeftComponent, options.hasRightComponent) : null,
                headerTitleContainerStyle,
                layoutPreset === 'center'
                    ? {
                        left: 0,
                        position: 'absolute',
                        right: 0,
                    }
                    : {}
            ];
            const stylesheet = [
                color ? { color } : null,
                layoutPreset === 'center' ? { textAlign: 'center' } : { textAlign: 'left' },
                titleStyle,
            ];
            return (react_1.default.createElement(react_native_1.View, { style: containerStyles },
                react_1.default.createElement(HeaderTitleComponent, { testID: "header-title", key: "header-title", onLayout: onLayout, allowFontScaling: allowFontScaling, style: stylesheet }, titleString)));
        };
    }
    static get defaultProps() {
        return {
            headerTitleAllowFontScaling: true,
            layoutPreset: react_native_1.Platform.OS === 'ios' ? 'center' : 'left',
        };
    }
    render() {
        const { header, headerStyle, headerTransparent, layoutPreset } = this.props;
        const styles = this.props.styles;
        if (header === null) {
            return null;
        }
        const onLayout = layoutPreset === 'center'
            ? (e) => { this.setState({ initWidth: e.nativeEvent.layout.width, }); }
            : undefined;
        const appBar = this._renderHeader();
        const background = this._renderBackground();
        const rootStyles = [
            headerTransparent ? styles.transparentContainer : styles.root,
            headerStyle,
        ];
        const wrapperStyles = [
            styles.wrapper,
            { height: getAppBarHeight(false /* TODO: isLandscape */) },
        ];
        return (react_1.default.createElement(react_native_1.SafeAreaView, { onLayout: onLayout, style: rootStyles },
            react_1.default.createElement(react_native_1.View, { style: wrapperStyles },
                background,
                react_1.default.createElement(react_native_1.View, { style: styles.flexOne }, appBar))));
    }
    _getHeaderTitleString() {
        const { headerTitle, title } = this.props;
        if (typeof headerTitle === 'string') {
            return headerTitle;
        }
        return title;
    }
    _getBackButtonTitleString() {
        const { headerBackTitle } = this.props;
        if (headerBackTitle || headerBackTitle === null) {
            return headerBackTitle;
        }
        return null;
    }
    _getTruncatedBackButtonTitle() {
        return this.props.headerTruncatedBackTitle;
    }
    /**
     * Renders left area of the header
     */
    _renderLeft() {
        const { headerLeft, headerLeftContainerStyle, headerPressColorAndroid, headerTintColor, headerBackImage, backTitleVisible, headerBackAllowFontScaling, headerBackTitleStyle, } = this.props;
        const styles = this.props.styles;
        // If headerLeft is an element or null, return as is
        const RenderedLeftComponent = headerLeft || index_1.HeaderBackButton;
        if (react_1.default.isValidElement(RenderedLeftComponent) || headerLeft === null) {
            return RenderedLeftComponent;
        }
        // Create a styles array
        let style = styles.left;
        // If there is a headerLeftContainerStyle, push it in the styles array
        if (headerLeftContainerStyle) {
            style = [style, headerLeftContainerStyle];
        }
        // Back button strings
        const backButtonTitle = this._getBackButtonTitleString();
        const truncatedBackButtonTitle = this._getTruncatedBackButtonTitle();
        // Calculate width, works if layoutPreset === 'center'
        const width = (this.state.initWidth && this.state.titleWidth)
            ? (this.state.initWidth - this.state.titleWidth) / 2
            : undefined;
        return (react_1.default.createElement(RenderedLeftComponent, { testId: "header-left", key: "header-left", pressColorAndroid: headerPressColorAndroid, tintColor: headerTintColor, backImage: headerBackImage, title: backButtonTitle, truncatedTitle: truncatedBackButtonTitle, backTitleVisible: backTitleVisible, allowFontScaling: headerBackAllowFontScaling, titleStyle: headerBackTitleStyle, style: style, 
            // layoutPreset={layoutPreset}
            width: width }));
    }
    _renderRight() {
        const { headerRight, headerRightContainerStyle } = this.props;
        const styles = this.props.styles;
        const style = [styles.right];
        if (headerRightContainerStyle) {
            style.push(headerRightContainerStyle);
        }
        return (react_1.default.createElement(react_native_1.View, { testID: "header-right-container", key: "header-right", style: style }, this._renderSubView(headerRight || null, Object.assign({}, this.props))));
    }
    _renderBackground() {
        const { headerBackground } = this.props;
        return this._renderSubView(headerBackground, Object.assign({}, this.props, { style: react_native_1.StyleSheet.absoluteFill }));
    }
    _renderSubView(renderer, props) {
        if (!renderer) {
            return null;
        }
        else if (react_1.default.isValidElement(renderer)) {
            return renderer;
        }
        return renderer(props);
    }
    _renderHeader() {
        const { layoutPreset } = this.props;
        const styles = this.props.styles;
        const left = this._renderLeft();
        const right = this._renderRight();
        const title = this._renderTitle({
            hasLeftComponent: !!left,
            hasRightComponent: !!right,
        });
        // const { transitionPreset } = this.props;
        const wrapperProps = { style: styles.header };
        if (this.props.headerLeft ||
            this.props.headerBackImage ||
            react_native_1.Platform.OS !== 'ios'
        // transitionPreset !== 'uikit'
        ) {
            return (react_1.default.createElement(react_native_1.View, Object.assign({}, wrapperProps), layoutPreset === 'center' ? [title, left, right] : [left, title, right]));
        }
        else {
            return (react_1.default.createElement(react_native_1.MaskedViewIOS, Object.assign({}, wrapperProps, { maskElement: react_1.default.createElement(react_native_1.View, { style: styles.iconMaskContainer },
                    react_1.default.createElement(react_native_1.Image, { source: require('../../../assets/common/back-icon-mask.png'), style: styles.iconMask }),
                    react_1.default.createElement(react_native_1.View, { style: styles.iconMaskFillerRect })) }),
                title,
                left,
                right));
        }
    }
}
Header.defaultStyles = (theme) => {
    return {
        flexOne: {
            flex: 1,
        },
        header: Object.assign({}, react_native_1.StyleSheet.absoluteFillObject, { 
            // justifyContent: 'space-between',
            alignItems: 'center', flexDirection: 'row' }),
        iconMask: {
            // These are mostly the same as the icon in ModularHeaderBackButton
            alignSelf: 'center',
            height: 23,
            marginLeft: 8.5,
            marginTop: -2.5,
            resizeMode: 'contain',
            transform: [{ scaleX: react_native_1.I18nManager.isRTL ? -1 : 1 }],
            width: 14.5,
        },
        iconMaskContainer: {
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'center',
        },
        iconMaskFillerRect: {
            backgroundColor: '#d8d8d8',
            flex: 1,
            marginLeft: -5,
        },
        item: {
            backgroundColor: 'transparent',
        },
        left: {
            alignItems: 'center',
            // bottom: 0,
            flexDirection: 'row',
            // left: 0,
            marginRight: theme.spacing.unit * 2,
        },
        right: {
            alignItems: 'center',
            bottom: 0,
            flexDirection: 'row',
            marginLeft: theme.spacing.unit * 2,
            position: 'absolute',
            right: 0,
            top: 0,
        },
        root: Object.assign({ backgroundColor: theme.palette.primary.main }, theme.elevation(4)),
        title: {
            // bottom: 0,
            // top: 0,
            alignItems: 'center',
            flexDirection: 'row',
            // left: 0,
            marginHorizontal: theme.spacing.unit * 2,
        },
        transparentContainer: Object.assign({ borderBottomColor: 'transparent', borderBottomWidth: 0, left: 0, position: 'absolute', right: 0, top: 0 }, theme.elevation(0)),
        wrapper: {
            paddingHorizontal: theme.spacing.unit * 2,
        },
    };
};
exports.Header = Header;
