import React, { Component } from 'react';

import { ToolbarButtonWithDialog } from '../../toolbox';

import InfoDialog from './InfoDialog';

/**
 * A configuration object to describe how {@code ToolbarButton} should render
 * the button.
 *
 * @type {object}
 */
const DEFAULT_BUTTON_CONFIGURATION = {
    buttonName: 'info',
    classNames: [ 'button', 'icon-info' ],
    enabled: true,
    id: 'toolbar_button_info',
    tooltipKey: 'info.tooltip'
};

/**
 * A React Component for displaying a button which opens a dialog with
 * information about the conference and with ways to invite people.
 *
 * @extends Component
 */
class InfoDialogButton extends Component {
    /**
     * Implements React's {@link Component#render()}.
     *
     * @inheritdoc
     * @returns {ReactElement}
     */
    render() {
        return (
            <ToolbarButtonWithDialog
                { ...this.props }
                button = { DEFAULT_BUTTON_CONFIGURATION }
                content = { InfoDialog } />
        );
    }
}

export default InfoDialogButton;