import {useEffect, useState} from "react";
import picture from "../assets/img/brokenPicture.png";
import Carousel from "react-material-ui-carousel";
import AutoAwesomeMotionIcon from "@mui/icons-material/AutoAwesomeMotion";
import ModalWindow from "./ModalWindow";
import AvaLoginBlock from "./AvaLoginBlock";
import CommentsBlock from "./CommentsBlock";
import styled from "styled-components";
import LikeBlock from "./LikeBlock";
import {gqlOnePost} from "../shared/services&utilits/gqlRequest";
const PostWrapper = styled.div`
position: relative;
display: flex;
min-width: 300px;
max-width: 300px;
margin: 15px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
`
const LogoManyImg = styled.div`
position: absolute;
z-index: 2;
right: 0;
width: 25px;
height: 35px;
transform: scaleX(-1);
`
const PicsInModalWrapper = styled.div`
width: 50%;
max-height: 100%;
margin: 30px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
`
const AvaLoginWrap = styled.div`
display: flex;
margin-top: 30px;
width: 80%;
`
const DescriptionPostWrapper = styled.div`
height: fit-content;
width: 100%;
box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
`
const InfoBlockInModalWrapper = styled.div`
width: 50%;
`
const Title = styled.p`
`
const Text = styled.p`
`
function Post({postId}){
const [isModal, setModal] = useState(false);
const [postData, setPostData] = useState(null);
useEffect(() => {
if (!postData) {
gqlOnePost(postId).then(res => res.json())
.then(data =>setPostData(data["data"].PostFindOne))
}
}, [])
function updatePostData(){
gqlOnePost(postId).then(res => res.json())
.then(data =>setPostData(data["data"].PostFindOne))
}
function toggleModalWindow() {
setModal(!isModal)
}
console.log(postData)
const ImgBlock = ({images}) => {
return (
<>
{!images && }
{images && images.length === 1 &&
}
{images && images.length > 1 &&