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


/**
 * A stateless component which renders Toggel view.
 */
const ToggleView = (props) => {
    return (
        <div className={'jp-desktop-toggel-view ' + props.parentClassName}>
            {
                props.imgToggleOptions.map((element, index) => {
                    return (
                        <div
                            role='button'
                            tabIndex='0'
                            key={index}
                            className={props.currentToggleView !== null ? (element === props.currentToggleView ? 'jp-desktop-toggel-view-active' : 'jp-desktop-toggel-view-inactive') :
                                element.isActive ? 'jp-desktop-toggel-view-active' : 'jp-desktop-toggel-view-inactive'}
                            onClick={() => props.onClick(index)}
                            onKeyDown={(event) => props.onImgKeyDown(index, event)}
                            aria-label={element.alt}
                        >
                            <img
                                src={element.isActive ? element.srcActive : element.srcInactive}
                                alt={element.alt}
                                width={props.imgWidth}
                                height={props.imgHeight}
                            />
                        </div>
                    );
                })
            }
        </div >
    );
};

export default ToggleView;


ToggleView.defaultProps = {
    /** Image width */
    imgWidth: '25',
    /** Image height */
    imgHeight: '25',
    /** Initially selected item */
    currentToggleView: null,
    /** Image array */
    imgToggleOptions: [],
    /* Class applied to parent container for additional styling  */
    parentClassName: ''

};

ToggleView.propTypes = {
    /** Event to be triggered on click */
    onClick: PropTypes.func.isRequired,
    /** Event to be triggered on keypress */
    onImgKeyDown: PropTypes.func,
    /** Image width */
    imgWidth: PropTypes.number,
    /** Image height */
    imgHeight: PropTypes.number,
    /** Image array */
    imgToggleOptions: PropTypes.array.isRequired,
    /** Initially selected item */
    currentToggleView: PropTypes.object,
    /* Class applied to parent container for additional styling  */
    parentClassName: PropTypes.string,
};