import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

import {Icon} from '../Icon';

export class ColumnItem extends PureComponent<any> {
    static propTypes = {
        id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
        name: PropTypes.string.isRequired,
        isSelected: PropTypes.bool,
        isPrimary: PropTypes.bool,
        numChildren: PropTypes.number,
        onSelect: PropTypes.func,
        index: PropTypes.number.isRequired
    };

    static defaultProps = {
        isSelected: false,
        isPrimary: false,
        numChildren: 0,
        onSelect: id => {}
    };

    getClassNames = () => {
        const {isSelected, isPrimary} = this.props;

        return classnames('rc-column-tree-view-item', {
            'rc-column-tree-view-item-selected': isSelected,
            'rc-column-tree-view-item-selected-active': isSelected && isPrimary
        });
    };

    handleSelect = () => {
        const {id, onSelect} = this.props;

        onSelect(id);
    };

    render() {
        const {name, numChildren, index} = this.props;

        const childrenCount = numChildren > 0 ? ` (${numChildren})` : null;

        return (
            <button
                title={name}
                onClick={this.handleSelect}
                className={this.getClassNames()}
                data-test-automation-id={`columnTreeViewItem${index}`}>
                <div className="rc-column-tree-view-item-name">
                    {name}
                    {childrenCount}
                </div>
                <Icon name="chevron-right-small" />
            </button>
        );
    }
}
