import { Icon } from '../icon';
import { classNames, stateClassNames, States } from '../misc';

import { KendoComponent } from '../_types/component';
import { MENU_FOLDER_NAME, MENU_MODULE_NAME } from './constants';
export const MENULISTITEM_CLASSNAME = `k-menu-item`;

const states = [
    States.hover,
    States.focus,
    States.active,
    States.selected,
    States.disabled
];

const options = {};


export type KendoMenuListItemProps = {
    text?: string;
    icon?: string;
    iconPosition?: string;
    first?: boolean;
    last?: boolean;
    showArrow?: boolean;
    arrowIconName?: string;
    dir?: "rtl" | "ltr";
    children?: React.JSX.Element[];
    popup?: React.JSX.Element;
    /** @aria aria-expanded state for expandable items */
    expanded?: boolean;
};

export type KendoMenuListItemState = { [K in (typeof states)[number]]?: boolean };

const defaultOptions = {
    dir: 'ltr',
    iconPosition: 'before'
} as const;

export const MenuListItem: KendoComponent<KendoMenuListItemProps & KendoMenuListItemState & React.HTMLAttributes<HTMLLIElement>> = (
    props: KendoMenuListItemProps &
        KendoMenuListItemState &
        React.HTMLAttributes<HTMLLIElement>
) => {
    const {
        hover,
        focus,
        active,
        selected,
        disabled,
        icon,
        text,
        first,
        last,
        showArrow,
        arrowIconName,
        iconPosition = defaultOptions.iconPosition,
        dir = defaultOptions.dir,
        children,
        popup,
        expanded,
        ...other
    } = props;

    let expandArrowName = arrowIconName;

    if ( !expandArrowName ) {
        expandArrowName = dir === 'rtl'
            ? 'chevron-left'
            : 'chevron-right';
    }

    return (

        <li
            role="menuitem"
            {...other}
            className={classNames(
                props.className,
                MENULISTITEM_CLASSNAME, //TODO Unify MenuItem & MenuListItem states
                "k-item",
                stateClassNames(MENULISTITEM_CLASSNAME, {
                    focus,
                    disabled
                }),
                {
                    ["k-first"]: first,
                    ["k-last"]: last,
                }
            )}
            {...(showArrow && { 'aria-haspopup': 'menu' as const })}
            {...(showArrow && { 'aria-expanded': expanded ? 'true' : 'false' })}
            {...(disabled && { 'aria-disabled': 'true' })}
            {...(focus && { tabIndex: 0 })}
        >
            <span

                className={classNames(
                    "k-link k-menu-link",
                    stateClassNames("k-menu-link", {
                        hover,
                        active,
                        selected,
                        disabled
                    }),
                )}>
                {icon && iconPosition === 'before' && <Icon className="k-menu-link-icon" icon={icon} />}
                <span className="k-menu-link-text">{text}</span>
                {icon && iconPosition === 'after' && <Icon className="k-menu-link-icon" icon={icon} />}
                {showArrow && <span className="k-menu-expand-arrow" aria-hidden="true"><Icon icon={expandArrowName} /></span>}
            </span>
            {children}
            {popup}
        </li>
    );
};

MenuListItem.states = states;
MenuListItem.options = options;
MenuListItem.className = MENULISTITEM_CLASSNAME;
MenuListItem.defaultOptions = defaultOptions;
MenuListItem.moduleName = MENU_MODULE_NAME;
MenuListItem.folderName = MENU_FOLDER_NAME;

export default MenuListItem;