import * as React from 'react';
import clsx from 'clsx';
import { Box, Flex } from '../Flex';
import { twMerge } from '../../twMerge';
export const baseClassName = 'ab-Panel';
const DEFAULT_BODY_CLS = 'twa:relative twa:flex-1 twa:p-2 twa:bg-defaultbackground twa:text-text-on-defaultbackground';
const Header = ({ children, variant = 'default', className, style, onClick, ...flexProps }) => {
    if (!children) {
        return null;
    }
    return (React.createElement(Flex, { flexDirection: "row", alignItems: "center", style: { ...style }, onClick: onClick, className: twMerge(`${baseClassName}__header ${baseClassName}__header--variant-${variant}`, className), ...flexProps }, children));
};
const Body = ({ children, bodyScroll, variant, className, style, }) => {
    if (!children) {
        return null;
    }
    if (bodyScroll === true) {
        bodyScroll = 'auto';
    }
    const bodyCls = clsx(DEFAULT_BODY_CLS, `${baseClassName}__body`, variant && `${baseClassName}__body--variant-${variant}`, bodyScroll ? `twa:overflow-auto` : null, {
        'twa:bg-primarylight twa:text-text-on-primary twa:border-0': variant === 'modern',
    }, className);
    return (React.createElement(Box, { style: style, className: bodyCls }, children));
};
const PlainHeader = ({ children, className }) => {
    return (React.createElement(Box, { className: clsx(`${baseClassName}__header`, `${baseClassName}__header--variant-plain`, className) }, children));
};
const FlexBody = ({ children, className }) => {
    return (React.createElement(Box, { className: clsx(DEFAULT_BODY_CLS, `${baseClassName}__body`, `${baseClassName}__body--variant-flex`, 'twa:overflow-auto twa:min-h-0', 'twa:flex-1 twa:flex twa:flex-col', className) }, children));
};
const Panel = (props) => {
    const { border, className, header, children, headerProps, bodyProps, bodyScroll, variant = 'default', ...boxProps } = props;
    const style = {};
    const headerStyle = {
        border,
        ...(headerProps ? headerProps.style : null),
    };
    const bodyStyle = {
        border,
        ...(bodyProps ? bodyProps.style : null),
    };
    const cls = twMerge(clsx(baseClassName, `${baseClassName}--variant-${variant}`, !header ? `${baseClassName}--no-header` : `${baseClassName}--with-header`, 'twa:rounded-standard', 'twa:flex twa:flex-col'), className);
    let headerCls = headerProps?.className;
    if (cls.includes('twa:rounded-none')) {
        headerCls = twMerge(headerCls, 'twa:rounded-none');
    }
    let bodyCls = bodyProps?.className;
    if (cls.includes('twa:rounded-none')) {
        bodyCls = twMerge(bodyCls, 'twa:rounded-none');
    }
    if (cls.includes('twa:border-none')) {
        bodyCls = twMerge(bodyCls, 'twa:border-none');
    }
    let childrenArr = React.Children.toArray(children);
    let theBody;
    let theHeader;
    childrenArr.forEach((child) => {
        if (React.isValidElement(child) && child.type === FlexBody) {
            theBody = child;
        }
        else if (React.isValidElement(child) && child.type === PlainHeader) {
            theHeader = child;
        }
    });
    if (theHeader) {
        childrenArr = childrenArr.filter((child) => child !== theHeader);
        theHeader = (React.createElement(PlainHeader, { ...theHeader.props, className: clsx(headerCls, theHeader.props.className ?? '') }));
    }
    if (theBody) {
        theBody = (React.createElement(FlexBody, { ...theBody.props, className: clsx(bodyCls, theBody.props.className ?? '') }));
    }
    return (React.createElement(Box, { ...boxProps, style: { ...style, ...boxProps.style }, className: cls },
        theHeader ?? (React.createElement(Header, { ...headerProps, style: headerStyle, variant: variant, className: headerCls }, header)),
        theBody ??
            (childrenArr.length > 0 ? (React.createElement(Body, { ...bodyProps, style: bodyStyle, bodyScroll: bodyScroll, variant: variant, className: twMerge(bodyCls) }, childrenArr)) : null)));
};
Panel.PlainHeader = PlainHeader;
Panel.FlexBody = FlexBody;
export default Panel;
