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

import {ColumnItem} from './ColumnItem';

export const ItemType = PropTypes.shape({
    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    name: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    parentId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    raw: PropTypes.any
});

export class Column extends Component<any> {
    static propTypes = {
        isActive: PropTypes.bool,
        selectedId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
        items: PropTypes.arrayOf(ItemType),
        onSelect: PropTypes.func,
        countChildren: PropTypes.func,
        index: PropTypes.number.isRequired
    };

    static defaultProps = {
        isActive: false,
        selectedId: null,
        items: [],
        onSelect: id => {},
        countChildren: id => 0
    };

    renderItem = ({id, name}, index) => {
        const {selectedId, isActive, countChildren, onSelect} = this.props;

        return (
            <ColumnItem
                key={id}
                id={id}
                name={name}
                isSelected={id === selectedId}
                isPrimary={id === selectedId && isActive}
                numChildren={countChildren(id)}
                onSelect={onSelect}
                index={index}
            />
        );
    };

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

        return (
            <div
                className="rc-column-tree-view-col"
                data-test-automation-id={`columnTreeViewColumn${index}`}>
                <div className="rc-column-tree-view-col-content">{items.map(this.renderItem)}</div>
            </div>
        );
    }
}
