import type { FC } from 'react';
import React, { Children } from 'react';
import cx from 'classnames';
import { HelpTooltip } from '../helpTooltip';
import { Section } from '../section';
import type { HelpTooltipProps } from '../helpTooltip';

export const CLASS_NAME = 'AlertContainer';

export interface AlertContainerProps {
    children?: React.ReactNode;
    className?: string;
    testId?: string;
    header: string;
    helpTooltipProps?: HelpTooltipProps;
    defaultClosed?: boolean;
    /**
     * Whether the container can be collapsed
     * @default true
     */
    expandable?: boolean;
}

export const AlertContainer: FC<AlertContainerProps> = ({
    className,
    testId = CLASS_NAME,
    header,
    helpTooltipProps,
    children,
    defaultClosed = false,
    expandable = true,
}) => {
    const shouldWrapChildren = Children.toArray(children).length > 4;

    return (
        <Section
            expandable={expandable}
            defaultExpanded={!defaultClosed}
            className={cx(CLASS_NAME, className)}
            testId={testId}
        >
            <Section.Header className={`${CLASS_NAME}-header`} title={header}>
                {helpTooltipProps && <HelpTooltip size={16} {...helpTooltipProps} />}
            </Section.Header>

            <Section.Body
                testId={'alertWrapper'}
                className={cx(`${CLASS_NAME}-body`, {
                    isWrapping: shouldWrapChildren,
                })}
            >
                {children}
            </Section.Body>
        </Section>
    );
};