import { useEffect, useState } from 'react'
import { AppDispatch, AppState, useAppDispatch } from '../../store/store'
import styles from './MainPage.module.css'
import { getAllPhotos, setTargetedUser } from '../../store/photos/photos.slice'
import { shallowEqual, useSelector } from 'react-redux'
import IPhoto from '../../interfaces/IPhoto'
import PhotoBlock from '../../components/PhotoBlock/PhotoBlock'
import Backdrop from '@mui/material/Backdrop';
import Box from '@mui/material/Box';
import Modal from '@mui/material/Modal';
import Fade from '@mui/material/Fade';
import { useNavigate } from 'react-router-dom'
import { CardMedia } from '@mui/material'
import image_not_found from '../../assets/image_not_found.png'
import IUser from '../../interfaces/IUser'
import Preloader from '../../components/UI/Preloader/Preloader'

const modalStyles = {
    position: 'absolute' as 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    maxWidth: 1000,
    width: '100%',
    bgcolor: 'background.paper',
    border: '2px solid #000',
    boxShadow: 24,
    p: 1,
    borderRadius: '5px'
};

const MainPage: React.FunctionComponent = (): React.ReactElement => {

    const [open, setOpen] = useState<boolean>(false);
    
    const [fullImageSrc, setFullImageSrc] = useState<string>('')

    const handleClose = () => setOpen(false);

    const dispatch: AppDispatch = useAppDispatch()

    const {photos, loadingPhotos} = useSelector((state: AppState) => state.photos, shallowEqual)

    const navigate = useNavigate()
    

    const goToUserPageHandler = (user: IUser) => {
        dispatch(setTargetedUser(user))
        navigate(`/user/${user._id}`)
    }

    const showFullImageHandler = (src: string) => {
        setFullImageSrc(src)
        setOpen(true)
    }

    useEffect(() => {
        dispatch(getAllPhotos())
    }, [])

    return(
        <div className={styles.main_page_container}>
        {
            loadingPhotos ? <Preloader/> : null
        }
        <Modal
            aria-labelledby="transition-modal-title"
            aria-describedby="transition-modal-description"
            open={open}
            onClose={handleClose}
            closeAfterTransition
            slots={{ backdrop: Backdrop }}
            slotProps={{
                backdrop: {
                    timeout: 500,
                },
            }}
        >
            <Fade in={open}>
            <Box sx={modalStyles}>
            <CardMedia
                component="img"
                style={{
                    maxWidth: '100%',
                    height: 'auto',
                    maxHeight: '70vh'
                }}
                image={import.meta.env.VITE_BASE_URL + 'uploads/' + fullImageSrc}
                alt="full image"
                onError = {(e) => {
                    e.currentTarget.src = image_not_found
                }}
            />
            </Box>
            </Fade>
        </Modal>
            {
                photos.length ?
                photos.map((photo: IPhoto) => {
                    return <PhotoBlock
                                key={photo._id}
                                photo={photo}
                                goToUserPage={()=>{goToUserPageHandler(photo.user)}}
                                showFullImage={()=>{showFullImageHandler(photo.photo)}}
                            />
                }): <h1>Gallery is empty</h1>
            } 
        </div>
    )
}

export default MainPage