import PropTypes from "prop-types";
import React from "react";

import HelpPopover from "../HelpPopover";
import Section from "./Section";
import Item from "./Item";
import Row from "./Row";

import classNames from "classnames";

export interface FormProps {
    children: any;
    /** CSS class names. */
    className?: string;
    /** Description for Form */
    description?: string;
    /** Indicates whether to include a help popover */
    helpIcon?: boolean;
    /** Text for popover */
    popoverText?: string;
    /** Title for popover */
    popoverTitle?: string;
    testSection?: string;
    /** Title for Form */
    title?: string;
}

const Form = ({ // eslint-disable-line @typescript-eslint/explicit-function-return-type
    children,
    className,
    description,
    helpIcon,
    popoverText,
    popoverTitle,
    testSection,
    title,
    ...props
}: FormProps) => {
    const formTitleClasses = classNames({
        "push--bottom": description,
        "push-double--bottom": !description,
    });
    return (
        <form data-test-section={testSection} className={classNames("oui-form-fields", className)} {...props}>
            {title && (
                <h2 className={formTitleClasses}>
                    {title}
                    {helpIcon && (
                        <HelpPopover
                            popoverTitle={popoverTitle}
                            horizontalAttachment="left"
                            verticalAttachment="middle"
                        >
                            <p>{popoverText}</p>
                        </HelpPopover>
                    )}
                </h2>
            )}

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

            {children}
        </form>
    );
};

Form.Section = Section;
Form.Item = Item;
Form.Row = Row;

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

export default Form;