import * as React from 'react';
import { createPortal } from 'react-dom';
import { useDispatch, useSelector } from 'react-redux';
import Dialog from '../../../../components/Dialog';
import { SettingsPanelSet } from '../../../../Redux/ActionsReducers/InternalRedux';
import { useAdaptable } from '../../../AdaptableContext';
import { getActionPanelSize, getMiddlePosition, getSettingsPanelSize } from '../Utilities';
import clsx from 'clsx';
const WindowDialog = (props) => {
    const { onChange, style, baseClassName, className, isActionModule, settingsPanelOptionsKey, onHide, ...dialogProps } = props;
    const adaptable = useAdaptable();
    const dispatch = useDispatch();
    const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
    let popupSettings = useSelector((state) => state?.Internal?.SettingsPanel?.[settingsPanelOptionsKey]);
    const handleWindowSettings = (settings) => {
        dispatch(SettingsPanelSet(settingsPanelOptionsKey, settings));
    };
    if (!popupSettings) {
        const size = isActionModule
            ? getActionPanelSize()
            : settingsPanelOptions.size ?? getSettingsPanelSize();
        popupSettings = {
            size: size,
            position: settingsPanelOptions.position ?? getMiddlePosition(size),
        };
    }
    const windowModalProps = {
        handleSelector: isActionModule
            ? `.${baseClassName} .ab-Panel__header`
            : '.ab-Adaptable-Popup__TopBar',
        minHeight: 460,
        minWidth: 400,
        size: popupSettings.size,
        position: popupSettings.position,
        onChange: handleWindowSettings,
    };
    return (React.createElement(Dialog, { windowModal: true, fixed: false, windowModalProps: windowModalProps, style: props.style, onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps, className: clsx('twa:p-0 twa:h-full', className) }));
};
const PopupDialog = (props) => {
    const { style, className, onHide, children, ...dialogProps } = props;
    return (React.createElement(Dialog, { fixed: false, style: props.style, className: clsx('twa:p-0 twa:h-[90vh] twa:w-[90vw]', className), onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps }, children));
};
export const AdaptablePopupDialog = (props) => {
    const { isActionModule, style, friendlyName, baseClassName, className, children, onHide, isWindowModal, modalContainer, } = props;
    if (modalContainer) {
        let ref = null;
        if (typeof modalContainer === 'string') {
            ref = globalThis.document.querySelector(modalContainer);
        }
        else {
            ref = modalContainer;
        }
        return createPortal(React.createElement(Dialog, { "data-name": props.dataName, modal: false, fixed: false, onDismiss: onHide, className: className }, children), ref);
    }
    if (isWindowModal) {
        const settingsPanelOptionsKey = isActionModule ? `action-${friendlyName}` : 'settings';
        return (React.createElement(WindowDialog, { dataName: props.dataName, settingsPanelOptionsKey: settingsPanelOptionsKey, isActionModule: isActionModule, onHide: onHide, style: style, baseClassName: baseClassName, className: className }, children));
    }
    else {
        const modalStyle = {
            ...style,
            ...(isActionModule ? { maxWidth: 800, maxHeight: 600 } : { maxWidth: 1200, maxHeight: 1000 }),
        };
        return (React.createElement(PopupDialog, { "data-name": props.dataName, onHide: onHide, style: modalStyle, className: className }, children));
    }
};
