// @flow

import React, { useCallback } from 'react';

import { translate } from '../../../base/i18n';
import { Icon, IconInviteMore } from '../../../base/icons';
import { getParticipantCount } from '../../../base/participants';
import { connect } from '../../../base/redux';
import { beginAddPeople } from '../../../invite';
import { isButtonEnabled, isToolboxVisible } from '../../../toolbox/functions.web';

declare var interfaceConfig: Object;

type Props = {

    /**
     * Whether to show the option to invite more people.
     */
    _shouldShow: boolean,

    /**
     * Whether the toolbox is visible.
     */
    _toolboxVisible: boolean,

    /**
     * Handler to open the invite dialog.
     */
    onClick: Function,

    /**
     * Invoked to obtain translated strings.
     */
    t: Function
}

/**
 * Represents a replacement for the subject, prompting the
 * sole participant to invite more participants.
 *
 * @param {Object} props - The props of the component.
 * @returns {React$Element<any>}
 */
function InviteMore({
    _shouldShow,
    _toolboxVisible,
    onClick,
    t
}: Props) {
    const onKeyPressHandler = useCallback(e => {
        if (onClick && (e.key === ' ' || e.key === 'Enter')) {
            e.preventDefault();
            onClick();
        }
    }, [ onClick ]);

    return (
        _shouldShow
            ? <div className = { `invite-more-container${_toolboxVisible ? '' : ' elevated'}` }>
                <div className = 'invite-more-content'>
                    <div
                        className = 'invite-more-header'
                        role = 'heading'>
                        {t('addPeople.inviteMoreHeader')}
                    </div>
                    <div
                        className = 'invite-more-button'
                        onClick = { onClick }
                        onKeyPress = { onKeyPressHandler }
                        role = 'button'
                        tabIndex = { 0 }>
                        <Icon src = { IconInviteMore } />
                        <div className = 'invite-more-button-text'>
                            {t('addPeople.inviteMorePrompt')}
                        </div>
                    </div>
                </div>
            </div> : null
    );
}

/**
 * Maps (parts of) the Redux state to the associated
 * {@code Subject}'s props.
 *
 * @param {Object} state - The Redux state.
 * @private
 * @returns {Props}
 */
function mapStateToProps(state) {
    const participantCount = getParticipantCount(state);
    const isAlone = participantCount === 1;
    const hide = interfaceConfig.HIDE_INVITE_MORE_HEADER;

    return {
        _shouldShow: isButtonEnabled('invite', state) && isAlone && !hide,
        _toolboxVisible: isToolboxVisible(state)
    };
}

/**
 * Maps dispatching of some action to React component props.
 *
 * @param {Function} dispatch - Redux action dispatcher.
 * @returns {Props}
 */
const mapDispatchToProps = {
    onClick: () => beginAddPeople()
};

export default translate(connect(mapStateToProps, mapDispatchToProps)(InviteMore));