<template>
	<div class="es-select-multipart" ref="containerEl">
		<es-select-input></es-select-input>
		<es-select-panel></es-select-panel>
	</div>
</template>

<script lang="ts">
import {
	defineComponent,
	PropType,
	watch,
	provide,
	onMounted,
	ref,
	onUnmounted,
} from 'vue'
import EsSelectInput from './select-input.vue'
import EsSelectPanel from './select-panel.vue'
import useSelectedValue from './useSelectedValue'
import useSourceList from './useSourceList'
import useElRef from './useElRef'
import usePanelState from './usePanelState'
import useInputValue from './useInputValue'

export default defineComponent({
	name: 'EsSelectMultipart',
	props: {
		modelValue: {
			type: Array as PropType<string[] | number[]>,
			default: () => [],
		},
		source: {
			type: Array,
			default: () => [],
		},
		placeholder: {
			type: String,
			default: '请选择',
		},
		filterable: {
			type: Boolean,
			default: false,
		},
		keyConfig: {
			type: Object as PropType<esSelectMultipartGlobalType.keyConfig>,
			default: () => ({
				labelKey: 'label',
				valueKey: 'value',
				disabledKey: 'disabled',
			}),
		},
		disabled: {
			type: Boolean,
			default: false,
		},
	},
	emits: [
		'change',
		'update:modelValue',
		'remove-tag',
		'select',
		'focus',
		'blur',
		'clear',
	],
	components: { EsSelectInput, EsSelectPanel },
	setup(props, ctx) {
		const containerEl = ref(null)
		const removeListener = ref(null)
		const { setInputEl } = useElRef()
		const {
			inputValue,
			isFocus,
			onInputChangeEvt,
			onInputFocusEvt,
			onInputBlurEvt,
		} = useInputValue(ctx.emit)

		const {
			panelState,
			openPanel,
			togglePanelState,
			closePanelOnClickBody,
		} = usePanelState()

		const { setContainerEl } = useElRef()
		onMounted(() => {
			setContainerEl(containerEl.value)
			removeListener.value = closePanelOnClickBody(containerEl)
		})
		onUnmounted(() => {
			removeListener.value?.()
		})
		const {
			selectedValue,
			removeSelectedValue,
			clearSelectedValue,
			addSelectedValueByModelValue,
			// getSelectedValueList,
			toggleSelect,
			isSelected,
		} = useSelectedValue(ctx.emit)
		const {
			setSourceList,
			sourceListMap,
			sourceList,
			originalSourceList,
		} = useSourceList(props.keyConfig)

		provide('parent', {
			props,

			containerEl,
			setInputEl,
			// panel status
			panelState,
			openPanel,
			togglePanelState,
			closePanelOnClickBody,
			// source list
			setSourceList,
			sourceListMap,
			originalSourceList,
			sourceList,
			// selected value
			selectedValue,
			removeSelectedValue,
			clearSelectedValue,
			toggleSelect,
			isSelected,
			// inout
			inputValue,
			isFocus,
			onInputChangeEvt,
			onInputFocusEvt,
			onInputBlurEvt,

			keyConfig: props.keyConfig,
		})

		watch(
			[() => props.modelValue, () => props.source],
			val => {
				const [modelValue = [], source = []] = val
				setSourceList(source, props)
				addSelectedValueByModelValue(modelValue, { sourceListMap })
			},
			{
				immediate: true,
				deep: true,
			},
		)
		// watch(
		// 	selectedValue,
		// 	newVal => {
		// 		const result = getSelectedValueList(newVal)
		// 		ctx.emit('change', result)
		// 		ctx.emit('update:modelValue', result)
		// 	},
		// 	{ deep: true },
		// )
		return {
			containerEl,
			togglePanelState,
		}
	},
})
</script>
