import * as React from 'react';
import { connect } from 'react-redux';
import { useHistory } from 'react-router-dom';

import { Box } from '@mui/system';
import { ImageList, ImageListItem } from '@mui/material';

import { AutoAwesomeMotionRounded } from '@mui/icons-material';

import { url } from '../../App';


export default function StandardImageList({ images }) {

    const history = useHistory()

    // переход на пост при клике на его картинку
    function toPost(name) {
        history.push(`/post/${name}`)
    }

    return (images &&
        <ImageList
            sx={{
                width: "100%",
                minHeight: "100%"
            }}
            cols={3}
            rowHeight={'auto'}
        >
            {images.map(item => (

                < ImageListItem
                    key={item?._id}
                >
                    {/* иконка галереи на посте в ленте */}
                    {(item?.images?.length > 1) && <AutoAwesomeMotionRounded
                        sx={{
                            color: 'white',
                            transform: 'scale(-1, 1)',
                            position: 'absolute',
                            right: '10px',
                            top: '10px',
                            fontSize: '32px'
                        }}
                    />}

                    {/* пост в ленте */}
                    <Box
                        sx={{
                            width: '100%',
                            paddingTop: '100%',
                            backgroundSize: 'cover',
                            backgroundColor: 'black',
                            backgroundImage: `url(/images/noPhoto.png)`,
                            backgroundRepeat: 'no-repeat',
                            cursor: 'pointer',
                        }}

                        style={item?.images && (
                            item?.images[0]?.url &&
                            { backgroundImage: `url(${url + item?.images[0]?.url})` }
                        )}

                        onClick={() => {
                            toPost(item._id)
                        }}
                    />
                </ImageListItem>
            ))
            }
        </ImageList >
    )
}


export const СStandardImageList = connect(state => ({ images: state?.feed?.UserFeed?.payload }))(StandardImageList)