import { ref, onMounted, watch, onBeforeUnmount } from 'vue';

// 模拟 IPage 接口
interface IPage {
    OwnerContainer: {
        offsetWidth: number;
        offsetHeight: number;
        getBoundingClientRect: () => DOMRect;
        addEventListener: (event: string, callback: () => void) => void;
        removeEventListener: (event: string, callback: () => void) => void;
    };
}

// 模拟 Button 类型
interface Button {
    content: string;
    clickHandler: () => void;
}

// 模拟 FocusManager 类
class FocusManager {
    static GetManagerInstance(_rootTradePage: any) {
        return {
            SetFocus: (element: HTMLElement) => {
                element.focus();
            }
        };
    }
}

export default {
    props: {
        ownerPage: {
            type: Object as () => IPage,
            required: true
        },
        messageBoxText: {
            type: String,
            required: true
        },
        defaultButton: {
            type: String,
            default: null
        },
        buttonConent: {
            type: Array as () => string[],
            default: () => []
        }
    },
    setup(props) {
        const MessageDialogResult = ref('');
        const _txtMsg = ref<HTMLElement | null>(null);
        const _txtClose = ref<HTMLElement | null>(null);
        const _buttonGroup = ref<HTMLElement | null>(null);
        const _rootTradePage = ref<HTMLElement | null>(null);
        const msg = ref(props.messageBoxText);

        const handler = () => {
            if (props.ownerPage) {
                const ownerContainer = props.ownerPage.OwnerContainer;
                const pageContainerPoint = ownerContainer.getBoundingClientRect();
                const element = document.querySelector('.message-box') as HTMLElement;
                if (element) {
                    element.style.width = `${ownerContainer.offsetWidth}px`;
                    element.style.left = `${pageContainerPoint.x}px`;
                    element.style.top = `${pageContainerPoint.y + (ownerContainer.offsetHeight - element.offsetHeight)}px`;
                }
            }
        };

        onMounted(() => {
            if (_txtMsg.value) {
                _txtMsg.value.textContent = msg.value;
            }

            if (props.ownerPage) {
                const ownerContainer = props.ownerPage.OwnerContainer;
                ownerContainer.addEventListener('resize', handler);
                handler();

                if (props.buttonConent.length > 0) {
                    props.buttonConent.forEach((item) => {
                        const btn = document.createElement('button');
                        btn.textContent = item;
                        btn.addEventListener('click', () => {
                            // 模拟关闭操作
                            MessageDialogResult.value = item;
                        });
                        if (_buttonGroup.value) {
                            _buttonGroup.value.appendChild(btn);
                        }
                    });
                }

                if (_buttonGroup.value && _buttonGroup.value.children.length > 0) {
                    if (_txtClose.value) {
                        _txtClose.value.style.display = 'none';
                    }
                    if (_rootTradePage.value) {
                        // 模拟 Ready 事件
                        const findButton = PreOrder(_rootTradePage.value as HTMLElement, props.defaultButton);
                        const focus = FocusManager.GetManagerInstance(_rootTradePage.value);
                        if (focus && findButton) {
                            focus.SetFocus(findButton);
                        }
                    }
                } else {
                    document.addEventListener('keydown', (e) => {
                        // 模拟关闭操作
                        e.preventDefault();
                    });
                    if (_txtClose.value) {
                        _txtClose.value.addEventListener('mousedown', (e) => {
                            // 模拟关闭操作
                            e.preventDefault();
                        });
                    }
                }
            }
        });

        onBeforeUnmount(() => {
            if (props.ownerPage) {
                const ownerContainer = props.ownerPage.OwnerContainer;
                ownerContainer.removeEventListener('resize', handler);
            }
        });

        const PreOrder = (node: HTMLElement, nodeName: string | null): HTMLElement | null => {
            const list = Array.from(node.getElementsByTagName('button')).filter((btn) => btn.style.display !== 'none');
            if (list.length > 0) {
                return list.find((btn) => btn.textContent === nodeName) || list[0];
            }
            return null;
        };

        return {
            MessageDialogResult,
            _txtMsg,
            _txtClose,
            _buttonGroup,
            _rootTradePage
        };
    }
};