import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../../../../tools/namingTools';
import { generateUniqueID } from '../../../../../tools/helpers';
import { hasNavigation, hasLanguageSwitch } from '../../../../../tools/footerHelpers';
import { localePropTypes } from '../../../../../constants/prop-types/config';
import { footerNavigationPropTypes, i18nFooterNavigationPropTypes } from '../../../../../constants/components/prop-types/footer';
import FooterLanguages from '../footer-languages/FooterLanguages';
import './styles/FooterNavigation.scss';

const n = createNamespace('FooterNavigation');

const FooterNavigation = ({
    i18n,
    locale,
    navigation,
    withSeparator,
    withLanguageSwitcher
}) => {
    const showNavigation = hasNavigation(navigation);
    const showLanguageSwitch = withLanguageSwitcher && hasLanguageSwitch(locale);

    const navItemClass = 'item';
    const navItemModifiers = withSeparator && 'with-separator';

    const renderNavItem = ({ label, url }) => label && (
        <li {...n(navItemClass, navItemModifiers).withTestId().props} key={generateUniqueID([label, url])}>
            <a {...n('link').props} href={url}>{label}</a>
        </li>
    );

    return (showNavigation || showLanguageSwitch) && (
        <div {...n('wrapper').props}>
            <nav {...n('nav').props} aria-label={i18n.navigationTitle}>
                <ul {...n('list').props}>
                    {showNavigation && navigation.items.map(renderNavItem)}
                    {showLanguageSwitch && (
                        <li {...n(navItemClass, ['language', navItemModifiers]).props}>
                            <FooterLanguages {...locale} />
                        </li>
                    )}
                </ul>
            </nav>
        </div>
    );
};

FooterNavigation.propTypes = {
    ...i18nFooterNavigationPropTypes,
    ...{
        navigation: PropTypes.shape(footerNavigationPropTypes),
        locale: PropTypes.shape(localePropTypes),
        withSeparator: PropTypes.bool,
        withLanguageSwitcher: PropTypes.bool
    }
};

FooterNavigation.defaultProps = {
    navigation: {},
    languages: {},
    i18n: {
        navigationTitle: 'Footer navigation'
    },
    withSeparator: true,
    withLanguageSwitcher: true
};

export default FooterNavigation;
