import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../../../tools/namingTools';
import { screenshotShape } from '../../../../constants/components/prop-types/product-image-viewer';
import Icon from '../../../../atoms/icon/Icon';
import Image from '../../../../atoms/image/Image';

import './styles/ProductImageViewerThumbnail.scss';

const n = createNamespace('ProductImageViewerThumbnail');

const ProductImageViewerThumbnail = ({ name, imageAlt, imageUrl, imageUrlSrcset, isVideo }) => {
    const hasImage = imageUrl || imageUrlSrcset;

    return (
        <div {...n('wrapper', hasImage && 'with-image').withE2EId().props}>
            {isVideo && (
                <React.Fragment>
                    <span {...n('text').props}>{name}</span>
                    <Icon {...n('icon').props} type="play" />
                </React.Fragment>
            )}
            {hasImage && (
                <Image
                    {...n('image', isVideo && 'video-preview').withTestId().withE2EId().props}
                    alt={imageAlt || name}
                    src={imageUrl}
                    srcSet={imageUrlSrcset}
                />
            )}
        </div>
    );
};

ProductImageViewerThumbnail.propTypes = {
    ...screenshotShape,
    ...{
        isVideo: PropTypes.bool
    }
};

ProductImageViewerThumbnail.defaultProps = {
    name: '',
    imageUrl: null,
    imageUrlSrcset: null,
    imageAlt: null,
    isVideo: false
};

export default ProductImageViewerThumbnail;
