import React from 'react';
import PropTypes from 'prop-types';
import { T } from 'Framework/i18n';
import get from 'lodash/get';

import './Styles.scss';
import { getConf } from '../../../../configuration';

class ConfigurationvariantItem extends React.Component {
    renderImage() {
        const { item } = this.props;
        const resourcePath = get(getConf().network, 'resourcesURL', '');
        return item.identifier ? (
            <img
                //@TODO remove loading by convention, when bringing this feature back to life
                src={`${resourcePath}/images/configurationvariants/${item.identifier}.png`}
                alt={item.title}
            />
        ) : null;
    }

    onProceed = () => {
        this.props.onProceed(this.props.item.identifier);
    };

    onSelect = () => {
        this.props.onSelect(this.props.identifier);
    };

    render() {
        const title = get(this.props, 'item.title');
        const description = get(this.props, 'item.description', '');

        return (
            <div
                className={'configurationvariantItem ' + (this.props.selected ? 'active' : '')}
                onClick={this.onSelect}
            >
                {this.renderImage()}
                <h1>{title}</h1>

                <div className="description">{description}</div>

                {this.props.selected === true && (
                    <div className="configurationvariantSelectionSelectButtonTile" onClick={this.onProceed}>
                        {T('configurationvariantSelection.proceed')}
                    </div>
                )}
            </div>
        );
    }
}

ConfigurationvariantItem.propTypes = {
    item: PropTypes.object,
    identifier: PropTypes.string,
    selected: PropTypes.bool,
    onProceed: PropTypes.func,
    onSelect: PropTypes.func,
};

export default ConfigurationvariantItem;
