import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../../../../tools/namingTools';
import { LEFT, RIGHT } from '../../../../../constants/alignment';
import { i18nFooterMenuPropTypes } from '../../../../../constants/components/prop-types/footer';
import { menuPropTypes } from '../../../../../constants/components/prop-types/menu';
import { localeShape } from '../../../../../constants/prop-types/config';

import LinkMenuItem from '../../../../../atoms/link-menu-item/LinkMenuItem';

import './styles/FooterMenu.scss';

const namespaceString = 'FooterMenu';
const n = createNamespace(namespaceString);

const FooterMenu = ({
    menu,
    i18n,
    navAlign
}) => {
    if (!menu || !menu.length) {
        return null;
    }

    return (
        <div {...n('wrapper').props}>
            <nav {...n('nav', [navAlign && `align-${navAlign}`]).props} aria-label={i18n.menuTitle}>
                {menu.map(menuItem => (
                    <LinkMenuItem
                        key={menuItem.uuid}
                        menuItem={menuItem}
                        namespaceString={namespaceString}
                        mainItemClassNames={n('col').withTestId().props}
                        mainItemSubListClassNames={n('list').withTestId().props}
                        childItemClassNames={n('item').withTestId().props}
                    />
                ))}
            </nav>
        </div>
    );
};

FooterMenu.propTypes = {
    ...i18nFooterMenuPropTypes,
    ...{
        locale: PropTypes.shape(localeShape),
        navAlign: PropTypes.oneOf([LEFT.value, RIGHT.value]),
        menu: menuPropTypes
    }
};

FooterMenu.defaultProps = {
    menu: [],
    i18n: {
        menuTitle: 'Footer Menu Navigation'
    },
    navAlign: null
};

export default FooterMenu;
