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


export interface DropdownListItemProps {
    /** Nodes to display within */
    children?: any;
    /** CSS class names. */
    className?: string;
    /** Remove padding from sides */
    hardSides?: boolean;
    /** Remove padding from top */
    hardTop?: boolean;
    /** Instructs the Dropdown parent to ignore clicks for toggle purposes. */
    ignoreToggle?: boolean;
    /** Removes border if true */
    removeBorderTop?: boolean;
    /**
     * Aria role for this list item. See roles here:
     * https://www.w3.org/WAI/PF/aria/roles
     */
    role?: string;
}

export default function DropdownListItem({ // eslint-disable-line @typescript-eslint/explicit-function-return-type
    children,
    className,
    hardSides,
    hardTop,
    ignoreToggle,
    removeBorderTop,
    role,
    ...props
}: DropdownListItemProps) {
    const classes = classNames({
        "hard--sides": hardSides,
        "hard--top": hardTop,
        "soft--sides": role === "separator",
        "oui-dropdown__item--separator": role === "separator",
        "oui-dropdown__item": true,
        "no-border": removeBorderTop,
    }, className);

    function handleMouseDownCapture(event): void {
        // Make the mousedown event a no-op for separators.
        // This prevents clicks on them from stealing focus.
        if (role === "separator") {
            event.preventDefault();
            event.stopPropagation();
        }
    }

    function handleOnClick(event): void {
        if (role === "separator") {
            event.preventDefault();
            event.stopPropagation();
        } else if (ignoreToggle) {
            event.ignoreToggle = true;
            event.persist();
        }
    }

    return (
        <li className={classes} onClick={handleOnClick} onMouseDownCapture={handleMouseDownCapture} role={role} {...props}>
            {children}
        </li>
    );
}

DropdownListItem.propTypes = {
    /** Nodes to display within */
    children: PropTypes.node,
    /** CSS class names. */
    className: PropTypes.string,
    /** Remove padding from sides */
    hardSides: PropTypes.bool,
    /** Remove padding from top */
    hardTop: PropTypes.bool,
    /** Instructs the Dropdown parent to ignore clicks for toggle purposes. */
    ignoreToggle: PropTypes.bool,
    /** Removes border if true */
    removeBorderTop: PropTypes.bool,
    /**
     * Aria role for this list item. See roles here:
     * https://www.w3.org/WAI/PF/aria/roles
     */
    role: PropTypes.string,
};