import {ReactNode, MouseEvent} from 'react'
import {cls} from '../utils/cls'
import {TypePickerContentType} from '../module-defs/ui-types'

/**
 */
export const UiPanel = (props: {
    className?: string

    titleElem: ReactNode
    asideElem?: ReactNode
    contentElem: ReactNode

    /**
     * 用于确认内容布局类型, 一般只考虑显示的元素布局, 如日期选择和周选择, 其实都是一样的 "date" 排列
     */
    contentType: TypePickerContentType
    onMouseDown?: (e: MouseEvent) => void
}) => {
    return (
        <div
            className={cls('panel-wrapper', props.className)}
            data-content-type={props.contentType}
            // 用于保证 blur 事件不触发
            onMouseDown={props.onMouseDown}
        >
            <div className={cls('title-wrapper')}>
                {props.titleElem}
            </div>
            <div className={cls('content-wrapper')}>
                {props.asideElem}
                {props.contentElem}
            </div>
        </div>
    );
};