import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../../../tools/namingTools';
import { KEYBOARD_KEYS } from '../../../../constants/accessibility';
import ButtonIcon from '../../../../atoms/button-icon/ButtonIcon';
import './styles/DesktopNav.scss';

const n = createNamespace('DesktopNav');

const DesktopNav = ({
    items,
    currentQuestionIndex,
    changeQuestionList,
    focusOnPanel,
    i18n
}) => {
    const tabsRefs = useRef([]);

    return (
        <div
            {...n('container').withTestId().props}
            role="tablist"
            aria-orientation="vertical"
            aria-label={i18n.menuLabel}
        >
            {items.map(({ id, name, ariaControls }, itemIndex) => {
                const isActive = currentQuestionIndex === itemIndex;

                const onKeyDown = e => {
                    if (e.key === KEYBOARD_KEYS.rightKey) {
                        focusOnPanel(itemIndex);
                        return;
                    }
                    let newPanelIndex = null;
                    if (e.key === KEYBOARD_KEYS.downKey && itemIndex !== (items.length - 1)) {
                        newPanelIndex = itemIndex + 1;
                    } else if (e.key === KEYBOARD_KEYS.upKey && itemIndex !== 0) {
                        newPanelIndex = itemIndex - 1;
                    }
                    if (newPanelIndex !== null) {
                        changeQuestionList(newPanelIndex);
                        tabsRefs.current[newPanelIndex].focus();
                    }
                };
                const onClick = e => {
                    e.preventDefault();
                    changeQuestionList(itemIndex);
                };

                return (
                    <ButtonIcon
                        {...n('button', [isActive && 'active']).withTestId().props}
                        key={id}
                        id={id}
                        role="tab"
                        aria-selected={isActive}
                        tabIndex={!isActive ? '-1' : undefined}
                        onKeyDown={onKeyDown}
                        onClick={onClick}
                        value={itemIndex}
                        aria-controls={ariaControls}
                        buttonRef={r => { tabsRefs.current[itemIndex] = r; }}
                    >
                        <span {...n('navElementText').props}>{name}</span>
                    </ButtonIcon>
                );
            })}
        </div>
    );
};
export default DesktopNav;

DesktopNav.propTypes = {
    changeQuestionList: PropTypes.func,
    currentQuestionIndex: PropTypes.number,
    items: PropTypes.arrayOf(PropTypes.shape({
        name: PropTypes.string,
        id: PropTypes.string,
        ariaControls: PropTypes.string
    })),
    focusOnPanel: PropTypes.func,
    i18n: PropTypes.shape({
        menuLabel: PropTypes.string
    })
};

DesktopNav.defaultProps = {
    changeQuestionList: null,
    currentQuestionIndex: 0,
    items: null,
    focusOnPanel: () => {},
    i18n: null
};
