'use strict';

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

import {Dropdown, SplitButton as BSSplitButton} from 'react-bootstrap';
import {Button} from './Button';
import lang from '../../lang/common/index-en_US';

const SplitToggle = BSSplitButton['Toggle']; // TODO (UIA-78226) WMC fix react-bootstrap typings

type SplitButtonProps = {
    children: React.ReactNode;
    id?: string | number;
    testAutomationId?: string;
    className?: string;
    bsStyle?: string;
    disabled?: boolean;
    buttonDisabled?: boolean;
    splitToggleDisabled?: boolean;
    splitToggleLabel?: string;
    title?: React.ReactNode;
    onClick?: Function;
} & Partial<SplitButtonDefaultProps>;

type SplitButtonDefaultProps = {
    testAutomationId: string;
    bsStyle: string;
    disabled: boolean;
    buttonDisabled: boolean;
    splitToggleDisabled: boolean;
    splitToggleLabel: string | null;
    title: React.ReactNode;
};

export class SplitButton extends React.Component<SplitButtonProps> {
    static propTypes = {
        children: PropTypes.node.isRequired,
        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        testAutomationId: PropTypes.string,
        className: PropTypes.string,
        bsStyle: PropTypes.string,
        disabled: PropTypes.bool,
        buttonDisabled: PropTypes.bool,
        splitToggleDisabled: PropTypes.bool,
        splitToggleLabel: PropTypes.string,
        title: PropTypes.string,
        onClick: PropTypes.func
    };

    static defaultProps = {
        id: null,
        testAutomationId: 'splitButton',
        className: null,
        bsStyle: 'primary',
        disabled: false,
        buttonDisabled: false,
        splitToggleDisabled: false,
        get splitToggleLabel() {
            return lang.MORE_OPTIONS;
        },
        title: '',
        onClick: null
    };

    render() {
        let {
            id,
            testAutomationId,
            className,
            bsStyle,
            disabled,
            buttonDisabled,
            splitToggleDisabled,
            splitToggleLabel,
            title,
            onClick,
            children
        } = this.props;

        let splitButtonClassNames = classnames('split-button', className);
        const splitDecoratorClassNames = classnames(
            'split-button-decorator',
            `split-button-decorator-${bsStyle}`
        );

        return (
            <Dropdown
                id={(id as string) || Date.now().toString()}
                className={splitButtonClassNames}
                disabled={disabled || (buttonDisabled && splitToggleDisabled)}
                data-test-automation-id={testAutomationId}>
                <div className={splitDecoratorClassNames}>
                    <Button
                        className="split-button-btn"
                        bsStyle={bsStyle}
                        disabled={disabled || buttonDisabled}
                        onClick={onClick as any}>
                        {title}
                    </Button>
                </div>
                <SplitToggle
                    bsStyle={bsStyle}
                    data-test-automation-id="splitToggle"
                    className="split-button-dropdown-toggle"
                    aria-label={splitToggleLabel}
                />
                <Dropdown.Menu>{children}</Dropdown.Menu>
            </Dropdown>
        );
    }
}
