import PropTypes from 'prop-types';
import React from 'react';
import { THEME_PRIMARY } from '../../constants/buttons';
import { generateUniqueID } from '../../tools/helpers';
import { createNamespace } from '../../tools/namingTools';
import Link from '../link/Link';
import './styles/SideBar.scss';

const n = createNamespace('sideBar');

const SideBar = ({
    navItems,
    headerBackground,
    sideBarBackground,
    sideBarBorder
}) => {
    if (!navItems || !navItems.length) {
        return null;
    }

    const componentVariables = {
        'container-border-color': sideBarBorder,
        'container-background-color': sideBarBackground,
        'header-background-color': headerBackground
    };

    const renderLink = ({ label, href, id }) => (
        <li {...n('linkWrapper').props} key={generateUniqueID([id, label, href])}>
            {href ? (
                <Link {...n('groupLink').withTestId().withE2EId().props} theme={THEME_PRIMARY} href={href}>{label}</Link>
            ) : label}
        </li>
    );

    const renderItem = ({ title, items: links }, index) => (
        <React.Fragment key={generateUniqueID([title, index])}>
            {title && (
                <dt
                    {...n('groupTitle').withTestId().withE2EId().props}
                >
                    {title}
                </dt>
            )}
            {Boolean(links && links.length) && (
                <dd {...n('linkWrapper').props}>
                    <ul {...n('list').props} aria-label={title}>
                        {links.map(renderLink)}
                    </ul>
                </dd>
            )}
        </React.Fragment>
    );

    const renderSection = ({ title, items }, index) => {
        const uid = generateUniqueID([title, index]);
        const ariaLabelledBy = `title-${uid}`;
        return (
            <div {...n('section').withTestId().withE2EId().props} key={uid} aria-labelledby={ariaLabelledBy}>
                {title && (
                    <div {...n('header').withTestId().withE2EId().props}>
                        <h3 {...n('headerText').withTestId().withE2EId().props} id={ariaLabelledBy}>{title}</h3>
                    </div>
                )}
                {Boolean(items && items.length) && (
                    <dl {...n('textContainer').withTestId().withE2EId().props}>
                        {items.map(renderItem)}
                    </dl>
                )}
            </div>
        );
    };

    return (
        <aside {...n('container').withVariables(componentVariables).withTestId().withE2EId().props} aria-label="Sidebar">
            {navItems.map(renderSection)}
        </aside>
    );
};

SideBar.propTypes = {
    navItems: PropTypes.arrayOf(
        PropTypes.shape({
            title: PropTypes.string,
            items: PropTypes.arrayOf(
                PropTypes.shape({
                    label: PropTypes.number,
                    href: PropTypes.string
                })
            )
        })
    ),
    headerBackground: PropTypes.string,
    sideBarBackground: PropTypes.string,
    sideBarBorder: PropTypes.string
};

SideBar.defaultProps = {
    navItems: null,
    headerBackground: '#F5F5F5',
    sideBarBackground: '#FFFF',
    sideBarBorder: '#CBCBCB'
};

export default SideBar;
