import * as React from 'react';
import { useEffect } from 'react';

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

import AutoAwesomeMotionRoundedIcon from '@mui/icons-material/AutoAwesomeMotionRounded';
import { useParams } from 'react-router';
import { connect } from 'react-redux';
import { actionFullUserFindOne } from '../redux/action';

function StandardImageList({ userGallery = [], loadUserGallery }) {
    console.log('userGallery: ', userGallery)

    const { userId } = useParams()
    useEffect(() => { loadUserGallery(userId) }, [userId])


    const clicker = (name) => {
        console.log('click: ', name)
    }



    return (
        <ImageList sx={{ width: "100%", minHeight: "100%" }} cols={3} rowHeight={'auto'} >
            {
                itemData.map((item) => (
                    // <ImageListItem key={item.img}>
                    <ImageListItem key={Math.random()} >

                        <AutoAwesomeMotionRoundedIcon 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',
                            backgroundRepeat: 'no-repeat'
                        }}

                            style={{ backgroundImage: `url(${item.img})` }}

                            // тут поставить ссылку на пост, к которому привязаны картинки
                            onClick={() => { clicker(item.title) }}

                        >


                            {/* <img
                            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
                            srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
                            alt={item.title}
                            loading="lazy"
                            style={{
                                width: '100%'
                            }}
                        /> */}
                        </Box>
                    </ImageListItem>
                ))
            }
        </ImageList >
    );
}



export const CStandardImageList = connect(state => ({ userGallery: state?.promise?.Feed?.payload }), { loadUserGallery: actionFullUserFindOne })(StandardImageList)

// массив с картинками
const itemData = [
    {
        img: '/images/image4.jpeg',
        title: 'Cat',
    },
    {
        img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
        title: 'Breakfast',
    },
    {
        img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
        title: 'Burger',
    },
    {
        img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
        title: 'Camera',
    },
    {
        img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
        title: 'Coffee',
    },
    {
        img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
        title: 'Hats',
    },
    {
        img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
        title: 'Basketball',
    },
    {
        img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
        title: 'Fern',
    },
    {
        img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
        title: 'Mushrooms',
    },
    {
        img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
        title: 'Tomato basil',
    },
    {
        img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
        title: 'Sea star',
    },
    {
        img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
        title: 'Bike',
    },
    {
        img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
        title: 'Breakfast',
    },
    {
        img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
        title: 'Burger',
    },
    {
        img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
        title: 'Camera',
    },
    {
        img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
        title: 'Coffee',
    },
    {
        img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
        title: 'Hats',
    },
    {
        img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
        title: 'Honey',
    },
    {
        img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
        title: 'Basketball',
    },
    {
        img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
        title: 'Fern',
    },
    {
        img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
        title: 'Mushrooms',
    },
    {
        img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
        title: 'Tomato basil',
    },
    {
        img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
        title: 'Sea star',
    }
];