import React from 'react'
import {
  Box,
  Button,
  Text,
  Avatar,
  Card,
  CardBody,
  Heading,
  Flex,
  HStack,
  Spacer,
  Tooltip,
  AlertDialogOverlay,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogCloseButton,
  AlertDialogBody,
  AlertDialogFooter,
  AlertDialog,
  useDisclosure } from '@chakra-ui/react'
import { EditIcon, DeleteIcon } from '@chakra-ui/icons'
import { useNavigate } from 'react-router-dom'

import { useContext,useEffect,useState } from 'react'


import AppContext from '../../context/AppContext'
import { deletePost } from '../../services/post.service'

import { getAllComments, getCommentsByAuthor } from '../../services/comment.service'
import PropTypes from 'prop-types';
import { getUserByHandle } from '../../services/users.service'

const DiscussionPost = ({ post }) => {
  const { user, userData } = useContext(AppContext)
  const navigate = useNavigate()
  const { isOpen, onOpen, onClose } = useDisclosure()
  const cancelRef = React.useRef()
   const[currentUserData, setCurrentUserData] = useState({})

  const handleDelete = (e) => {
    e.preventDefault();

    deletePost(post.id);
  }


  const handleEdit = () => {
    navigate("/edit-post", { state: { post }, replace: true })
  }

  const goToPost = () => {
    navigate(`/post/${post.id}`, { state: { post }, replace: true })
  }


    const goToProfile = () => {
      if(post.author !== undefined || post.author !== null){
        navigate(`/profile/${post.author}`, { state: {author:post.author,authorPhoto:post.authorPhoto}, replace: true });
      }else{
        return;
      }
    };

    useEffect(() => {
      console.log("a");
      getUserByHandle(post.author).then((snapshot) => {
        const user = snapshot.val();
        setCurrentUserData({ ...user });
      });
    }, [post.author]);

    return (

    <>
    <Card
    // backgroundColor='#DAEAB4'
    mt='5'
    _hover={{backgroundColor:"rgba(0,0,0,0.05)"}} >
        <CardBody >
            {/* <Flex justify='center'> */}
            <Flex justify='left'>
            <HStack spacing='24px'>
            <Tooltip label={post.author}>

              <Box
              onClick={goToProfile}
              >
            <Avatar size='sm' src={currentUserData.photoURL} ></Avatar>
              </Box>

            </Tooltip>
            <Spacer />
            <Heading size='md' onClick={goToPost} _hover={{textDecoration:"none", cursor:'pointer'}}>
            {post.title.length > 50 ? `${(post.title).substring(0, 50)}...` : post.title}</Heading>
            <Spacer />
            <Text
            style={{ position: "absolute", left: "67%" }}
            >{post.createdOn.toDateString()}</Text>

            <Text style={{ position: "absolute", left: "80%" }}>{post.likedBy ? (Object.keys(post.likedBy).length) : 0}</Text>
            <Text style={{ position: "absolute", left: "85%" }}>{post.comments ? (Object.keys(post.comments).length) : 0}</Text>
             {(userData.handle==post.author && userData.accountType!==0 || userData.accountType==2)&&
             <Button
            style={{ position: "absolute", left: "87%" }}
            variant='ghost'
            leftIcon={<EditIcon/>}
            onClick={handleEdit}
            size='sm'>
            Edit
            </Button>}
            {(userData.handle==post.author && userData.accountType!==0  || userData.accountType==2)&&
            <Button
            style={{ position: "absolute", left: "92%" }}
            variant='ghost'
            leftIcon={<DeleteIcon />}
            onClick={onOpen}
            size='sm'>
             Delete
          </Button>}
          <AlertDialog
    motionPreset='slideInBottom'
    leastDestructiveRef={cancelRef}
    onClose={onClose}
    isOpen={isOpen}
    isCentered
>
    <AlertDialogOverlay />

    <AlertDialogContent>
      <AlertDialogHeader>Delete post?</AlertDialogHeader>
      <AlertDialogCloseButton  />
      <AlertDialogBody>
        Are you sure you want to delete this post?
      </AlertDialogBody>
      <AlertDialogFooter>
        <Button ref={cancelRef} onClick={onClose}>
          No
        </Button>
        <Button
  onClick={handleDelete}
  backgroundColor='#BC4749'
  color='white'
  ml={3}>
          Yes
        </Button>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
            </HStack>
          </Flex>
        </CardBody>
      </Card>
    </>
  )
}



// DiscussionPost.propTypes = {
//     post: PropTypes.shape({
//       id: PropTypes.string.isRequired,
//       title: PropTypes.string.isRequired,
//       author: PropTypes.string.isRequired,
//       createdOn: PropTypes.instanceOf(Date).isRequired,
//       likedBy: PropTypes.object.isRequired,
//       comments: PropTypes.object.isRequired,
//     }).isRequired,
//   };

export default DiscussionPost;