import { getNavBarLayout } from '../../utils/navBar/index';

Component({
	options: {
		multipleSlots: true,
	},

	properties: {
		title: { type: String, value: '' },
		back: { type: String, value: 'auto' },
		fixed: { type: Boolean, value: false },
		zIndex: { type: Number, value: 100 },
		bgColor: { type: String, value: 'transparent' },
		color: { type: String, value: '#252535' },
		arrowColor: { type: String, value: '#252535' },
	},

	data: {
		statusBarHeight: 0,
		navBarHeight: 44,
		totalNavHeight: 0,
		navPaddingRight: 0,
		_showBack: false,
		_spacerHeight: 'auto',
		_navStyle: '',
	},

	lifetimes: {
		attached() {
			const layout = getApp<IAppOption>().globalData.navBarLayout || getNavBarLayout();
			this._applyLayout(layout);
		},
	},

	observers: {
		'fixed, back, zIndex'(_fixed: boolean, _back: string, _zIndex: number) {
			const layout = getApp<IAppOption>().globalData.navBarLayout || getNavBarLayout();
			this._applyLayout(layout);
		},
	},

	methods: {
		_applyLayout(layout: ReturnType<typeof getNavBarLayout>) {
			const { fixed, back, zIndex } = this.properties;
			const _showBack = back === 'show' || (back === 'auto' && getCurrentPages().length > 1);

			this.setData({
				...layout,
				_showBack,
				_spacerHeight: fixed ? layout.totalNavHeight + 'px' : 'auto',
				_navStyle: fixed
					? `position: fixed; top: 0; left: 0; right: 0; z-index: ${zIndex};`
					: '',
			});
		},

		onBack() {
			wx.navigateBack({ delta: 1 });
		},
	},
});