import {
	useParent
} from '../common/relation';
import {
	VantComponent
} from '../common/component';
VantComponent({
	classes: ['item-title-class'],
	field: true,
	relation: useParent('dropdown-menu', function() {
		this.updateDataFromParent();
	}),
	props: {
		value: {
			type: null,
			observer: 'rerender',
		},
		title: {
			type: String,
			observer: 'rerender',
		},
		disabled: Boolean,
		titleClass: {
			type: String,
			observer: 'rerender',
		},
		options: {
			type: Array,
			value: [],
			observer: 'rerender',
		},
		popupStyle: String,
		useBeforeToggle: {
			type: Boolean,
			value: false,
		},
		rootPortal: {
			type: Boolean,
			value: false,
		},
	},
	data: {
		transition: true,
		showPopup: false,
		showWrapper: false,
		displayTitle: '',
		safeAreaTabBar: false,
	},
	methods: {
		rerender() {
			wx.nextTick(() => {
				var _a;
				(_a = this.parent) === null || _a === void 0 ? void 0 : _a.updateItemListData();
			});
		},
		updateDataFromParent() {
			if (this.parent) {
				const {
					overlay,
					duration,
					activeColor,
					closeOnClickOverlay,
					direction,
					safeAreaTabBar,
				} = this.parent.data;
				this.setData({
					overlay,
					duration,
					activeColor,
					closeOnClickOverlay,
					direction,
					safeAreaTabBar,
				});
			}
		},
		onOpen() {
			this.$emit('open');
		},
		onOpened() {
			this.$emit('opened');
		},
		onClose() {
			this.$emit('close');
		},
		onClosed() {
			this.$emit('closed');
			this.setData({
				showWrapper: false
			});
		},
		onOptionTap(event) {
			const {
				option
			} = event.currentTarget.dataset;
			const {
				value
			} = option;
			const shouldEmitChange = this.data.value !== value;
			this.setData({
				showPopup: false,
				value
			});
			this.$emit('close');
			this.rerender();
			if (shouldEmitChange) {
				this.$emit('change', value);
			}
		},
		toggle(show, options = {}) {
			const {
				showPopup
			} = this.data;
			if (typeof show !== 'boolean') {
				show = !showPopup;
			}
			if (show === showPopup) {
				return;
			}
			this.onBeforeToggle(show).then((status) => {
				var _a;
				if (!status) {
					return;
				}
				this.setData({
					transition: !options.immediate,
					showPopup: show,
				});
				if (show) {
					(_a = this.parent) === null || _a === void 0 ? void 0 : _a.getChildWrapperStyle().then((
						wrapperStyle) => {
						this.setData({
							wrapperStyle,
							showWrapper: true
						});
						this.rerender();
					});
				} else {
					this.rerender();
				}
			});
		},
		onBeforeToggle(status) {
			const {
				useBeforeToggle
			} = this.data;
			if (!useBeforeToggle) {
				return Promise.resolve(true);
			}
			return new Promise((resolve) => {
				this.$emit('before-toggle', {
					status,
					callback: (value) => resolve(value),
				});
			});
		},
	},
});