'use strict';

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import {Button} from './Button';
import {Icon} from './Icon';

export class MoreButton extends React.Component<any> {
    static defaultProps = {
        className: '',
        children: null,
        placeholder: ''
    };

    static propTypes = {
        className: PropTypes.string,
        children: PropTypes.node,
        placeholder: PropTypes.string
    };

    render() {
        const {className, placeholder, children, disabled, ...props} = this.props;
        const buttonClassName = classnames(className, 'form-control text-left more-button');
        const labelClassName = classnames('more-label', {
            placeholder: !children && placeholder,
            'more-label--disabled': disabled
        });

        return (
            <Button className={buttonClassName} disabled={disabled} {...props}>
                <div className={labelClassName}>
                    <Icon name="chevron-right-big" className="pull-right" />
                    {children || placeholder}
                </div>
            </Button>
        );
    }
}
