import {ReactNode, MouseEvent} from 'react'
import cx from 'classnames'
import {TypePickerContentType} from '../module-defs/ui-types'
import {UiPanel} from './ui-panel'

/**
 *
 * @param props
 * @constructor
 */
export const UiRangePanel = (props: {
    leftContentType: TypePickerContentType
    leftTitleElem: ReactNode
    leftAsideElem?: ReactNode
    leftContentElem: ReactNode

    rightContentType: TypePickerContentType
    rightTitleElem: ReactNode
    rightAsideElem?: ReactNode
    rightContentElem: ReactNode

    actionElem?: ReactNode
    onMouseDown?: (e: MouseEvent) => void
}) => {
    const actionElem = props.actionElem

    return (
        <div
            className={cx(
                'brick-date-picker-range-wrapper',
                !!actionElem && 'brick-date-picker-panel-with-quick-actions'
            )}
            onMouseDown={props.onMouseDown}
        >
            {actionElem}

            <UiPanel
                titleElem={props.leftTitleElem}
                asideElem={props.leftAsideElem}
                contentElem={props.leftContentElem}
                contentType={props.leftContentType}
            />

            <UiPanel
                titleElem={props.rightTitleElem}
                asideElem={props.rightAsideElem}
                contentElem={props.rightContentElem}
                contentType={props.rightContentType}
            />
        </div>
    )
}