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

/**
 * A survey card atom which displays a text, a selection and an image.
 */

class SurveyCard extends Component {

    state = {
        selected: this.props.selected || false
    }

    changeSelected = () => {
        this.setState({ selected: !this.state.selected });
    };

    onKeyPressHandler = (e) => {
        e.preventDefault();
        if (e.which === 13 || e.which === 32) {
            this.setState({ selected: !this.state.selected });
        }
    };

    render() {

        let classList = [
            'jp-survey-card',
            this.props.parentClassName ? this.props.parentClassName : '',
            this.state.selected ? '' : 'jp-survey-card-deselected'
        ];

        return (
            <div role="button"
                onClick={this.changeSelected.bind(this)}
                onKeyPress={this.onKeyPressHandler.bind(this)}
                tabIndex="0"
                className={classList.join(' ')}
                style={{
                    width: this.props.width,
                    height: this.props.height
                }} 
            >  
                <span className="jp-survey-card-check"/>
                <div className="jp-center-content">
                    <div className="jp-center-vertical">
                        <img src={this.props.imgSrc} 
                            alt={this.props.imgAlt} 
                            style={{
                                maxWidth: this.props.width
                            }}/>
                        <div className="jp-survey-card-text">
                            {this.props.text}
                        </div>
                    </div>
                </div>     
            </div>
        );
    }
}

export default SurveyCard;

SurveyCard.propTypes = {
    /** Class for the container element. Prefered way to set width and height  */
    parentClassName: PropTypes.string,
    /** Width of the card */
    width: PropTypes.string,
    /** Height of the card */
    height: PropTypes.string,
    /** Sets the card selection value */
    selected: PropTypes.bool,
    /** Text to be displayed inside card */
    text: PropTypes.string.isRequired,
    /** Path of the image which needs to be displayed.  */
    imgSrc: PropTypes.string,
    /** Alt text for the image */
    imgAlt: PropTypes.string
};

SurveyCard.defaultProps = {
    width: '300px',
    height: '230px',
    selected: false
};