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

const n = createNamespace('DesktopNav');

const DesktopNav = ({
    styles,
    items,
    currentQuestionIndex,
    changeQuestionList
}) => {
    const getStyling = isSelected => Object.assign(
        {
            padding: `${styles.padding} 14px`
        },
        isSelected && { background: styles.background }
    );

    const componentVariables = {
        'desktopMenu-border-color': styles.navBorderColor,
        'desktopMenu-background-color': styles.navBackgroundColor
    };

    if (styles && styles.borderBottom) {
        componentVariables['item-border-bottom'] = styles.borderBottom;
    }

    return (
        <div {...n('desktopMenu').withVariables(componentVariables).withTestId().props}>
            {items.map((item, itemIndex) => (
                <div
                    {...n('navElement', currentQuestionIndex === itemIndex && 'active').withTestId().props}
                    style={getStyling(currentQuestionIndex === itemIndex)}
                    onKeyDown={null}
                    onClick={() => changeQuestionList(itemIndex)}
                    value={itemIndex}
                    key={item.name}
                >
                    <span {...n('navElementText').props}>{item.name}</span>
                </div>
            ))}
        </div>
    );
};
export default DesktopNav;

DesktopNav.propTypes = {
    changeQuestionList: PropTypes.func,
    currentQuestionIndex: PropTypes.number,
    styles: PropTypes.shape({
        padding: PropTypes.number,
        borderBottom: PropTypes.string,
        background: PropTypes.string,
        navBorderColor: PropTypes.string,
        navBackgroundColor: PropTypes.string
    }),
    items: PropTypes.arrayOf(PropTypes.shape({
        name: PropTypes.string,
        faqs: PropTypes.arrayOf(PropTypes.shape({
            answer: PropTypes.string,
            question: PropTypes.string
        }))
    }))
};

DesktopNav.defaultProps = {
    changeQuestionList: null,
    currentQuestionIndex: 0,
    styles: { padding: 10, borderBottom: '', background: '', navBorderColor: '', navBackgroundColor: '' },
    items: [{ name: '1' }, { name: '2' }, { name: '3' }]
};
