import PropTypes from "prop-types";
import React from "react";
import HelpPopover from "../../HelpPopover";

import classNames from "classnames";

export interface FormSectionProps {
    children: any;
    /** CSS class names. */
    className?: string;
    /** Description for Form Section */
    description?: string;
    /** Indicates whether to include a help popover */
    helpIcon?: boolean;
    /** Indicates whether to include the "optional" tag to the section */
    isOptional?: boolean;
    /** Indicates whether to include a required asterisk */
    isRequired?: boolean;
    /** Text for popover */
    popoverText?: string;
    /** Title for popover */
    popoverTitle?: string;
    testSection?: string;
    /** Title for Section */
    title?: string;
}

const Section = ({ // eslint-disable-line @typescript-eslint/explicit-function-return-type
    children,
    className,
    description,
    helpIcon,
    isOptional,
    isRequired,
    popoverText,
    popoverTitle,
    testSection,
    title,
    ...props
}: FormSectionProps) => {
    const headerClasses = classNames("push--bottom", { "oui-label--required": isRequired });
    return (
        <div data-test-section={testSection} className={classNames("soft-triple--bottom", className)} {...props}>
            {title && (
                <h3 className={headerClasses}>
                    {title}
                    {isOptional && <label className="oui-label__optional">(Optional)</label>}
                    {helpIcon && (
                        <HelpPopover
                            popoverTitle={popoverTitle}
                            horizontalAttachment="left"
                            verticalAttachment="middle"
                        >
                            <p>{popoverText}</p>
                        </HelpPopover>
                    )}
                </h3>
            )}

            {description && <div className="push-double--bottom">{description}</div>}

            {children}
        </div>
    );
};

Section.propTypes = {
    children: PropTypes.node.isRequired,
    /** CSS class names. */
    className: PropTypes.string,
    /** Description for Form Section */
    description: PropTypes.node,
    /** Indicates whether to include a help popover */
    helpIcon: PropTypes.bool,
    /** Indicates whether to include the "optional" tag to the section */
    isOptional: PropTypes.bool,
    /** Indicates whether to include a required asterisk */
    isRequired: PropTypes.bool,
    /** Text for popover */
    popoverText: PropTypes.string,
    /** Title for popover */
    popoverTitle: PropTypes.string,
    testSection: PropTypes.string,
    /** Title for Section */
    title: PropTypes.string,
};

export default Section;