import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../../../../tools/namingTools';

import './styles/HeaderMobileList.scss';

const n = createNamespace('HeaderMobileList');

const HeaderMobileList = React.forwardRef(({
    level,
    isVisible,
    isActive,
    children,
    'data-testid': testId,
    className: extraClass,
    ...otherProps
}, ref) => {
    const modifiers = [
        `level-${level}`,
        level > 1 && 'submenu',
        (level > 1 && !isVisible) && 'hidden',
        isActive && 'active'
    ];
    return (
        <ul
            {...n('list', modifiers).withClass(extraClass).withTestId(testId).props}
            ref={ref}
            {...otherProps}
        >
            {children}
        </ul>
    );
});

HeaderMobileList.defaultProps = {
    level: 0,
    isVisible: false,
    isActive: false,
    className: '',
    'data-testid': undefined
};

HeaderMobileList.propTypes = {
    level: PropTypes.number,
    isVisible: PropTypes.bool,
    isActive: PropTypes.bool,
    className: PropTypes.string,
    'data-testid': PropTypes.string
};

export default HeaderMobileList;
