import React, { Component, CSSProperties } from 'react'
import { CloseOutlined } from '@ant-design/icons';
import { Modal } from 'antd';
import Draggable from 'react-draggable';
import './DragModal.less';

/**
 * 通用组件-可拖拽弹窗（对话框）
 */

interface IProps {
    visible?: boolean         //弹窗是否可见
    title?: string            //弹窗标题
    onClose?: () => void      //点击弹窗关闭按钮后触发的事件
    wrapClassName?: string    //弹窗外层容器的类名
    width?: number            //弹窗外层容器类名
    destroyOnClose?: boolean  //关闭弹窗时是否销毁弹窗内组件
    centered?: boolean        //弹窗是否默认位于页面正中心
    forceRender?: boolean     //强制渲染弹窗
    dragForbidden?: boolean   //弹窗是否可拖拽
    showCloseIcon?: boolean   //是否显示弹窗关闭按钮
    showHeader?: boolean      //是否显示弹窗标题
    mask?: boolean            //是否展示遮罩，这个值为true时，打开弹窗主页面会变暗；为false时则不会有变化
    style?: CSSProperties
    children?: React.ReactNode
}

export default class DragModal extends Component<IProps> {
    draggleRef = React.createRef<any>();
    static defaultProps = {
        //一些属性的默认值
        centered: true,
        forceRender: false,
        dragForbidden: false,
        showCloseIcon: true,
        showHeader: true,
        mask: false,
    }

    state = {
        modalDragDisabled: true,
        bounds: { left: 0, top: 0, bottom: 0, right: 0 },
    }

    onModalDragStart = (_, uiData) => {
        if (this.props.dragForbidden) return;
        const { clientWidth, clientHeight } = window?.document?.documentElement;
        const targetRect = this.draggleRef?.current?.getBoundingClientRect();
        this.setState({
            bounds: {
                left: -targetRect?.left + uiData?.x,
                right: clientWidth - (targetRect?.right - uiData?.x),
                top: -targetRect?.top + uiData?.y,
                bottom: clientHeight - (targetRect?.bottom - uiData?.y),
            },
        });
    }

    onCancel = (_) => {
        if (this.props.onClose) {
            this.props.onClose();
        }
    }

    render() {
        const ModalDragger = (
            <div
                className="modal-dragger"
                onMouseOver={() => {
                    if (this.state.modalDragDisabled) {
                        this.setState({ modalDragDisabled: false })
                    }
                }}
                onMouseOut={() => {
                    this.setState({ modalDragDisabled: true })
                }}>
                <span style={{ userSelect: 'none' }}>{this.props.title}</span>
                <span className="fill-remaining-space"></span>
                {this.props.showCloseIcon && (
                    <CloseOutlined className="modal-close" onClick={this.onCancel} />
                )}
            </div>
        )

        return (
            <Modal
                getContainer={false}
                open={this.props.visible}
                onCancel={this.onCancel}
                title={this.props.showHeader ? ModalDragger : null}
                width={this.props.width || 520}
                mask={this.props.mask}
                maskClosable={false}
                // transitionName=""
                centered={this.props.centered}
                destroyOnClose={this.props.destroyOnClose || false}
                wrapClassName={`${this.props.wrapClassName || ''} drag-modal`}
                closable={false}
                footer={null}
                style={this.props.style || null}
                forceRender={this.props.forceRender}
                modalRender={modal => (
                    <Draggable
                        disabled={this.state.modalDragDisabled || this.props.dragForbidden}
                        bounds={this.state.bounds}
                        onStart={(event, uiData) => this.onModalDragStart(event, uiData)}>
                        <div ref={this.draggleRef}>{modal}</div>
                    </Draggable>
                )}>
                {this.props.children}
            </Modal>
        )
    }
}