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

import IDUtil from '../../../../util/IDUtil';
import Info from '../../../shared/Info';

import { LayersPropTypes } from './Layers';

// Per layer, show the layer header with the title, description, menu etc;
class LayerHeaders extends React.PureComponent {
    render() {
        const { layers } = this.props;
        return (
            <div className={IDUtil.cssClassName('tl-layer-headers')}>
                {layers.map(layer => (
                    <div
                        key={layer.id}
                        className={classNames('tl-layer-header', {
                            active: layer.id === this.props.activeLayerId
                        })}
                        style={{
                            height: layer.height
                        }}
                        onClick={() => {
                            this.props.onClick(layer.id);
                        }}
                    >
                        <Info
                            id={'layer_header_info_' + layer.id}
                            text={layer.description}
                            className="black left"
                        />
                        {layer.title}
                    </div>
                ))}
            </div>
        );
    }
}

LayerHeaders.propTypes = {
    layers: LayersPropTypes,
    activeLayerId: PropTypes.string,
    onClick: PropTypes.func.isRequired
};

export default LayerHeaders;
