import React from 'react';
import PropTypes from 'prop-types';

import BSDropdown from 'react-bootstrap/lib/Dropdown';
import {Icon} from './Icon';
import lang from '../../lang/common/index-en_US';

export class CTADropdown extends React.Component<any> {
    static propTypes = {
        testAutomationId: PropTypes.string,
        children: PropTypes.node,
        toggleMoreLabel: PropTypes.string
    };

    static defaultProps = {
        testAutomationId: 'CATDropdown',
        children: null,
        get toggleMoreLabel() {
            return lang.MORE_SETTINGS;
        }
    };

    static childContextTypes = {
        isCTADropdown: PropTypes.bool
    };

    getChildContext() {
        return {
            isCTADropdown: true
        };
    }

    render() {
        let {testAutomationId, children, toggleMoreLabel, ...props} = this.props;

        return (
            <BSDropdown {...props as any} pullRight data-test-automation-id={testAutomationId}>
                <BSDropdown.Toggle aria-label={toggleMoreLabel} noCaret>
                    <Icon name="more-vertical" className="icon-dropdown-toggle-more" />
                </BSDropdown.Toggle>
                <BSDropdown.Menu>{children}</BSDropdown.Menu>
            </BSDropdown>
        );
    }
}
