
import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../../../../tools/namingTools';
import { LEFT, RIGHT } from '../../../../../constants/alignment';
import { footerMenuPropTypes, i18nFooterMenuPropTypes } from '../../../../../constants/components/prop-types/footer';
import { generateUniqueID } from '../../../../../tools/helpers';

import './styles/FooterMenu.scss';

const n = createNamespace('FooterMenu');

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

    const renderMenuItem = ({ title, items: subItems }) => {
        const { label: titleText, url: titleUrl } = title;

        return (
            <div {...n('col').props} key={generateUniqueID([titleText])}>
                {titleText && (
                    <span {...n('title').props}>
                        {titleUrl ? (
                            <a {...n('link').props} href={titleUrl}>{titleText}</a>
                        ) : titleText}
                    </span>
                )}
                {Boolean(subItems && subItems.length) && (
                    <ul {...n('list').props}>
                        {subItems.map(({ label, url }) => (
                            <li {...n('item').props} key={generateUniqueID([label, url])}>
                                <a {...n('link').props} href={url}>{label}</a>
                            </li>
                        ))}
                    </ul>
                )}
            </div>
        );
    };

    return (
        <div {...n('wrapper').props}>
            <nav {...n('nav', [navAlign && `align-${navAlign}`]).props} aria-label={i18n.menuTitle}>
                {items.map(renderMenuItem)}
            </nav>
        </div>
    );
};

FooterMenu.propTypes = {
    ...footerMenuPropTypes,
    ...i18nFooterMenuPropTypes,
    ...{
        navAlign: PropTypes.oneOf([LEFT.value, RIGHT.value])
    }
};

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

export default FooterMenu;
