import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../tools/namingTools';
import { DIRECTION_TOP, DIRECTION_BOTTOM, scrollToTop, scrollToBottom } from '../../tools/interactivity/scroll';
import Icon from '../icon/Icon';
import './styles/ButtonPageScroll.scss';

const n = createNamespace('ButtonPageScroll');

const ButtonPageScroll = ({
    direction,
    text,
    hiddenText
}) => {
    const onClick = () => {
        if (direction === DIRECTION_TOP) {
            scrollToTop();
        } else if (direction === DIRECTION_BOTTOM) {
            scrollToBottom();
        }
    };

    return (
        <button type="button" {...n('button').withTestId().props} onClick={onClick} tabIndex="-1">
            <span {...n('iconWrapper').props}>
                <Icon
                    {...n('icon').props}
                    type={direction === DIRECTION_BOTTOM ? 'caretDown' : 'caretUp'}
                />
            </span>
            {text && <span {...n('text', hiddenText && 'sr-only').withTestId().props}>{text}</span>}
        </button>
    );
};

ButtonPageScroll.propTypes = {
    text: PropTypes.string,
    direction: PropTypes.oneOf([DIRECTION_TOP, DIRECTION_BOTTOM]),
    hiddenText: PropTypes.bool
};

ButtonPageScroll.defaultProps = {
    text: null,
    direction: DIRECTION_TOP,
    hiddenText: false
};

export default ButtonPageScroll;
