import * as React from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';
import { Button, CardActionArea, CardActions } from '@mui/material';
import image_not_found from '../../assets/image_not_found.png'
import { shallowEqual, useSelector } from 'react-redux';
import { AppState } from '../../store/store';

import IPhotoUserGalleryBlockProps from './IPhotoUserGalleryBlockProps';

const PhotoUserGalleryBlock: React.FunctionComponent<IPhotoUserGalleryBlockProps> = (props): React.ReactElement => {

    const {user} = useSelector((state: AppState) => state.users, shallowEqual)

    return (
            <div style={{margin: '10px'}}>
                <Card sx={{ maxWidth: 350 }}>
                    <CardActionArea
                        onClick={props.showFullImage}
                    >
                        <CardMedia
                            component="img"
                            width="200"
                            image={import.meta.env.VITE_BASE_URL + 'uploads/' + props.photo.photo}
                            onError = {(e) => {
                                e.currentTarget.src = image_not_found
                            }}
                            alt={props.photo.title + 'image'}
                            
                        />
                        <CardContent style={{margin: '5px', padding: '5px', marginBottom: 0}}>
                        <Typography gutterBottom variant="h5" component="div" style={{marginBottom: 0}}>
                            {props.photo.title}
                        </Typography>
                        </CardContent>
                    </CardActionArea>
                    {
                        user?._id === props.photo.user._id 
                        ? 
                        <CardActions>
                            <Button onClick={props.deletePhoto} variant="outlined" color="error">Delete</Button> 
                        </CardActions>
                        : 
                        null
                    }
                </Card>
            </div>
    );
}

export default PhotoUserGalleryBlock