import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { Scrollbars } from 'react-custom-scrollbars';
import { preventEventDoubling } from 'Utils/Events/preventEventDoubling';
import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';
import './Styles.scss';
import Typography from '@material-ui/core/Typography';

const styles = () => ({
    imageLibraryThumbnail: {
        width: 150,
        height: 'auto',
        borderRadius: 6,
        marginBottom: 10,
        marginRight: 10,

        backgroundImage:
            'linear-gradient(45deg, #F0F0F0 25%, transparent 25%), ' +
            'linear-gradient(-45deg, #F0F0F0 25%, transparent 25%), ' +
            'linear-gradient(45deg, transparent 75%, #F0F0F0 75%), ' +
            'linear-gradient(-45deg, transparent 75%, #F0F0F0 75%)',
        backgroundSize: '20px 20px',
        backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',

        '&:hover': {
            cursor: 'pointer',
        },
    },
    imageContainer: {
        position: 'relative',
        display: 'inline-block',
    },
    priceLabel: {
        position: 'absolute',
        background: '#0000005E',
        borderRadius: 6,
        padding: '4px',
        bottom: '15px',
        right: '10px',
    },
    priceLabelText: {
        color: '#ffffff',
    },
    activeGalleryImage: {
        border: '2px solid #ED1C29',
    },
    inactiveGalleryImage: {
        border: '1px solid #0000005E',
        padding: 1,
    },
});

const motivesWrapper = {
    maxHeight: 600,
    minHeight: 355,
};

const ImageThumbnail = withStyles(styles, { name: 'ImageThumbnail' })(
    ({ selected, classes, motive, onSelect, hidePrices }) => (
        <div className={classes.imageContainer}>
            <AnalyticsWrapper targetId="image_thumbnail_select" data={motive}>
                <img
                    className={
                        classes.imageLibraryThumbnail +
                        ' ' +
                        (selected === motive ? classes.activeGalleryImage : classes.inactiveGalleryImage)
                    }
                    src={typeof motive === 'object' ? motive.url : motive}
                    alt={typeof motive === 'object' ? motive.title : motive}
                    onClick={() => {
                        onSelect(motive);
                    }}
                />
            </AnalyticsWrapper>
            {!hidePrices && typeof motive === 'object' && motive.priceFormatted !== null && (
                <div className={classes.priceLabel}>
                    <Typography className={classes.priceLabelText} variant="body2">
                        {motive.priceFormatted}
                    </Typography>
                </div>
            )}
        </div>
    )
);

class ImageLibraryThumbnail extends React.Component {
    static propTypes = {
        motives: PropTypes.array,
        onSelect: PropTypes.func,
        selected: PropTypes.object,
        client: PropTypes.object,
    };
    onSelect = preventEventDoubling(item => {
        const { onSelect } = this.props;
        onSelect && onSelect(item);
    });

    render() {
        const { motives, selected, client } = this.props;
        const query = new URLSearchParams(location.search);
        const hidePrices = query.has('_hide_prices')
            ? query.get('_hide_prices') === '1'
            : client && !!client.hidePrices;
        return (
            <Scrollbars
                autoHeightMin={250}
                autoHide={true}
                renderThumbVertical={props => <div {...props} className="thumb-vertical" />}
                renderTrackVertical={props => <div {...props} className="track-vertical" />}
                style={motivesWrapper}
            >
                {motives.map((motive, i) => (
                    <ImageThumbnail
                        key={i}
                        motive={motive}
                        onSelect={this.onSelect}
                        selected={selected}
                        hidePrices={hidePrices}
                    />
                ))}
            </Scrollbars>
        );
    }
}

export default ImageLibraryThumbnail;
