import {useEffect, useState} from "react";
import {connect} from "react-redux";
import {Box, Button, CircularProgress, 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";
import imgNotFound from "../img/catalog/imgNotFound.png";
export const timeCalc = (createdAt) => {
let formattedTime;
let date = new Date(+createdAt);
let year = date.getFullYear();
let month = "0" + (date.getMonth()+1);
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}) => {
return (
)
}
const CarouselItem = ({images}) => {
return (
}
PrevIcon={}
fullHeightHover={true}
>
{
images.map((item, index) => )
}
)
}
const ProductTitle = ({title}) => {
return (
{title || 'PRODUCT TITLE'}
)
}
const ProductPrice = ({price}) => {
return (
${price ? parseFloat(price).toFixed(2) : 0 }
)
}
const ProductDescription = ({description}) => {
return (
{description || 'PRODUCT DESCRIPTION'}
)
}
const ProductTags = ({title, subtitle}) => {
return (
{title}: {Array.isArray(subtitle) ? subtitle.map((item, index) => {item}{subtitle.length-1 !== index && ", " } ) : subtitle}
)
}
const AddToCart = ({cart, good, addToCart}) => {
let [count, setCount] = useState(cart[good?._id]?.count || 1)
useEffect(() => {
setCount(cart[good?._id]?.count || 1)
},[cart])
console.log(count)
return (
setCount(value)}/>
)
}
const CAddToCart = connect(state=>({cart: state.cart}), {addToCart: actionCardChange})(AddToCart)
const AddToWishList = ({good={}, wishlist ,onAddToWishList, onWishListRemove}) => {
const flag = good?._id in wishlist
return (
)
}
const CAddToWishList = connect(state => ({wishlist: state.wishlist}), {onAddToWishList: actionWishListAdd, onWishListRemove: actionWishListRemove})(AddToWishList)
const Goods = ({good}) => {
const matches = useMediaQuery('(max-width:768px)');
return (
good && Object.values(good).length > 0 ?
{Array.isArray(good?.images) && good?.images.length > 1 ? :
}
{good?._id && }
{Array.isArray(good?.categories) &&
{
return {item?.name}
})}/>
}
{good?.createdAt && }
:
)
}
const CGoods = connect(state => ({good: state.promise['goodFindOne']?.payload}))(Goods)
const BlockProduct = ({match:{params:{_id}}, getData}) => {
useEffect(() => {
getData(_id)
},[_id, getData])
return(
<>
>
)
}
const CBlockProduct = connect(null, {getData: actionGoodFindOne})(BlockProduct)
const ProductPage = () => {
return (
)
}
export default ProductPage
//TODO MOBILE VERSION