FinalProject/src/pages/ProductPage.jsx

import {useEffect, useState} from "react";
import {connect} from "react-redux";
import {Box, Button, Container, Divider, Grid, Paper, Typography, useMediaQuery} from "@mui/material";
import {actionGoodFindOne} from "../actions/ActionGoodFind";
import Switch from "react-router-dom/es/Switch";
import Route from "react-router-dom/es/Route";
import Page404 from "./404Page";
import Breadcrumb from "../components/Breadcrumbs";
import {SetCount} from "../components/SetCount";
import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
import Link from "react-router-dom/es/Link";
import {actionCardChange} from "../reducers/CartReducer";
import {actionWishListAdd, actionWishListRemove} from "../reducers/WishListReducer";
import FavoriteIcon from "@mui/icons-material/Favorite";
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
import Carousel from 'react-material-ui-carousel'
import {backURL} from "../actions/PathDB";

let defProduct = {
    "_id": "5dc45d0b5df9d670df48cc4b",
    "name": "Apple iPhone X 64GB Space Gray",
    "price": 5000,
    "images": [
        {
            "url": "images/00505f5f08ac113874318dee67975aa9",
            "originalFileName": "image"
        },
        {
            "url": "images/00505f5f08ac113874318dee67975aa9",
            "originalFileName": "image"
        },
        {
            "url": "images/00505f5f08ac113874318dee67975aa9",
            "originalFileName": "image"
        }
    ]
}

const timeCalc = (createdAt) => {
    let formattedTime = 0;
    let date = new Date(+createdAt);
    let year = date.getFullYear();
    let month = "0" + date.getMonth();
    let day = "0" + date.getDate();
    let hours = "0" + date.getHours();
    let minutes = "0" + date.getMinutes();
    let seconds = "0" + date.getSeconds();
    formattedTime = day.substr(-2) + '.' + month.substr(-2) + '.' + year +
        ' ' + hours.substr(-2) + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
    return formattedTime;
}

const ImageItem = ({images: {url, originalFileName}}) => {
    return (
        <img src={backURL + '/' + url} alt={originalFileName.split('.')[0]}/>
    )
}
const CarouselItem = ({images}) => {
    return (
        <Carousel
            navButtonsProps={{
                style: {
                    backgroundColor: 'transparent',
                    color: '#000',
                    borderRadius: 0
                }
            }}
            NextIcon={<ArrowForwardIosIcon/>}
            PrevIcon={<ArrowBackIosNewIcon/>}
            fullHeightHover={true}
        >
            {
                images.map((item, index) => <Box key={index} sx={{width: '100%', display: 'flex', justifyContent: 'center', height: '340px'}}><ImageItem key={item._id} images={item} /></Box>)
            }
        </Carousel>
    )
}

const ProductTitle = ({title}) => {
    return (
        <Typography
            variant='h4'
            fontFamily='sarif'
            letterSpacing='4px'
        >
            {title || 'PRODUCT TITLE'}
        </Typography>
    )
}
const ProductPrice = ({price}) => {
    return (
        <Typography
            variant='h5'
            margin='30px 0'
        >
            ${price ? parseFloat(price).toFixed(2) : 0 }
        </Typography>
    )
}
const ProductDescription = ({description}) => {
    return (
        <Typography
            fontSize='17px'
            letterSpacing='1px'
            lineHeight='1.7em'
            color='#616161'
            fontWeight='300'
        >
            {description || 'PRODUCT DESCRIPTION'}
        </Typography>
    )
}
const ProductTags = ({title, subtitle}) => {
    return (
        <Typography
            variant='body2'
            color='#616161'
            fontWeight='300'
            marginBottom='10px'
        >
            {title}: {Array.isArray(subtitle) ? subtitle.map((item, index) => <span key={index}>{item}{subtitle.length-1 !== index && ", " } </span>) : subtitle}
        </Typography>
    )
}

const AddToCart = ({good, addToCart}) => {
    let [count, setCount] = useState(1)
    return (
        <Box width='100%' backgroundColor='#fff' padding='30px'>
            <Grid container justifyContent='space-between'>
                <Grid xs={5} item>
                   <SetCount onCount={value => setCount(value)}/>
                </Grid>
                <Grid xs={5} item>
                    <Button
                        sx={{height: '55px', width: '100%', borderRadius: '0', color: '#000', borderColor: '#000', fontSize: '20px', fontWeight: '300'}}
                        variant="outlined"
                        color={"inherit"}
                        onClick={() => addToCart(good, count)}
                    >
                        ADD TO CART
                    </Button>
                </Grid>
            </Grid>
        </Box>
    )
}
const CAddToCart = connect(null, {addToCart: actionCardChange})(AddToCart)

const AddToWishList = ({good={}, wishlist ,onAddToWishList, onWishListRemove}) => {
    const flag = good?._id in wishlist
    return (
        <Button size="small"
                color="inherit"
                sx={{paddingLeft: '0', margin: '30px 0'}}
                onClick={() => {flag ? onWishListRemove(good) : onAddToWishList(good)}}
        >
            <Typography
                color='#000'
                display='flex'
                alignItems='center'
                fontSize='13px'
                fontWeight='600'
                letterSpacing='2px'
            >
                {flag ?
                    <><FavoriteIcon sx={{marginRight: '10px'}}/> REMOVE FROM WISHLIST</>:
                    <><FavoriteBorderIcon sx={{marginRight: '10px'}}/> ADD TO WISHLIST</>
                }
            </Typography>
        </Button>
    )
}
const CAddToWishList = connect(state => ({wishlist: state.wishlist}), {onAddToWishList: actionWishListAdd, onWishListRemove: actionWishListRemove})(AddToWishList)

const Goods = ({good:{_id, name, description, price, images, categories, createdAt}=defProduct}) => {
    const matches = useMediaQuery('(max-width:768px)');

    return (
        <Grid container justifyContent='space-around' padding={matches ? "20px 0" : "50px 0"} >
            <Grid xs={12} md={6} item padding='5px 70px 5px 10px'>
                {Array.isArray(images) && images.length > 1 ? <CarouselItem images={images}/> : <Box sx={{width: '100%', display: 'flex', justifyContent: 'center', height: '340px'}}><ImageItem images={images[0]}/></Box>}
                <Divider sx={{margin: '20px 0'}}/>
                <ProductDescription description={description}/>
            </Grid>
            <Grid xs={12} md={6} item padding='5px 110px 5px 10px'>
                <ProductTitle title={name}/>
                <ProductPrice price={price}/>
                <CAddToCart good={{_id, name, price, images}}/>
                <CAddToWishList good={{_id, name, price, images}}/>
                <Box>
                    {_id && <ProductTags key={'SKU'} title={'SKU'} subtitle={_id}/>}
                    {Array.isArray(categories) &&
                        <ProductTags key={'CATEGORY'} title={'CATEGORY'} subtitle={categories.map(item => {
                            return <Link key={item?._id} style={{color: "#000", textDecoration: 'none'}} to={`/catalog/category/${item?._id}`}>{item?.name}</Link>
                         })}/>
                    }
                    {createdAt && <ProductTags key={'TIMEOFCREATION'} title={'TIME OF CREATION'} subtitle={timeCalc(createdAt)}/>}
                </Box>
            </Grid>
        </Grid>
    )
}
const CGoods = connect(state => ({good: state.promise['goodFindOne']?.payload}))(Goods)

const BlockProduct = ({match:{params:{_id}}, getData}) => {
    useEffect(() => {
        getData(_id)
    },[_id, getData])

    return(
        <>
            <main style={{backgroundColor: "#f3f3f3"}}>
                <Breadcrumb links={['good']}/>
                <Container maxWidth="lg">
                    <CGoods key={_id} />
                </Container>
            </main>
        </>
    )
}
const CBlockProduct = connect(null, {getData: actionGoodFindOne})(BlockProduct)

const ProductPage = () => {
    return (
        <Switch>
            <Route path="/good/:_id" component={CBlockProduct} />
            <Route path="*" component={Page404} />
        </Switch>
    )
}

export default ProductPage

//TODO MOBILE VERSION