import React from 'react';
import PropTypes from 'prop-types';
import Image from '../../../../atoms/image/Image';
import { createNamespace } from '../../../../tools/namingTools';
import { getImageSrc } from '../../../../tools/images';
// IMPORTANT: (s)css should be imported after other atoms/components
import './styles/CompareProductScreenshots.scss';

const n = createNamespace('CompareProductScreenshots');

export const CompareProductScreenshots = ({
    screenshots,
    name
}) => (
    <div {...n('wrapper').withTestId().props}>
        {screenshots && screenshots.map(screenshot => {
            const src = getImageSrc(screenshot.imageUrl, screenshot.imageUrlSrcset);
            return (
                <Image
                    className={n('image').props.className}
                    src={src}
                    alt={name}
                    key={screenshot.imageUrl}
                />
            );
        })}
    </div>
);

CompareProductScreenshots.isRenderable = item => item.screenshots && item.screenshots.length;

CompareProductScreenshots.propTypes = {
    screenshots: PropTypes.arrayOf(
        PropTypes.shape({
            imageUrl: PropTypes.string,
            imageUrlSrcset: PropTypes.shape({
                default: PropTypes.string,
                '1x': PropTypes.string,
                '2x': PropTypes.string
            })
        })
    ),
    name: PropTypes.string
};

CompareProductScreenshots.defaultProps = {
    screenshots: [],
    name: ''
};
