import React, { useState, useEffect } from 'react';
import Moment from 'react-moment';
import { Link } from '@reach/router';
import axios from 'axios';
import './styles.scss';
import queryString from 'query-string';
import Linkify from 'react-linkify';

import { useStyles } from './styles';
import Box from '@material-ui/core/Box';
import clsx from 'clsx';
import {
  Card,
  CardHeader,
  CardMedia,
  CardContent,
  CardActions,
  Collapse,
  Avatar,
  IconButton,
  Typography,
  Divider
} from '@material-ui/core';
import {
  Favorite as FavoriteIcon,
  Comment as CommentIcon,
  ExpandMore as ExpandMoreIcon,
  MoreVert as MoreVertIcon,
} from '@material-ui/icons';
import ToggleButton from '@material-ui/lab/ToggleButton';

import AddComment from '../AddComment';
import Comment from '../Comment';
import { CloudName, ConnectServerUrl } from '../../utils/constants';

import { Cookies } from 'react-cookie';
const cookies = new Cookies();
const email = cookies.get('userCookie').Email;
const googleToken = cookies.get('userCookie').Token;
let name, userId, username;

export default function PostCard(props) {
  const classes = useStyles();
  const [expanded, setExpanded] = useState(false);
  const [selected, setSelected] = useState(false);
  const [likeCount, setLikeCount] = useState(props.likes.likers.length);
  const comments = props.comments;

  const handleExpandClick = () => {
    setExpanded(!expanded);
  };

  useEffect(() => {
    if (cookies.get('userDetails')) {
      name = cookies.get('userDetails').name;
      userId = cookies.get('userDetails')._id;
      username = cookies.get('userDetails').username;
    }
    if (props.likes.likers.find((e) => e === userId)) setSelected(true);
  }, []);

  const handleLike = (selected) => {
    let liked = !selected;

    axios
      .post(
        `${ConnectServerUrl}/handlelike?` +
          queryString.stringify({ _id: props._id, email, googleToken }),
        {
          currentUserId: cookies.get('userDetails')._id,
          email,
          liked,
          //liked is true if user like , false if unliked ;
        }
      )
      .then((res) => console.log(res))
      .catch((err) => console.log(err));
  };

  return (
    <Card className={classes.root + " card"}>
      <CardHeader
        avatar={
          <Link to={`/user/${props.creator.username}`}>
            <Avatar aria-label="recipe" className={classes.avatar}>
              {props.creator
                ? props.creator.name
                  ? props.creator.name[0]
                  : // + props.creator.name.split(" ")[1][0]
                    props.Name[0]
                : // + props.Name.split(" ")[1][0]
                props.Name
                ? props.Name
                : 'X'}
            </Avatar>
          </Link>
        }
        action={
          <IconButton aria-label="settings">
            <MoreVertIcon />
          </IconButton>
        }
        title={props.title}
        subheader={
          <Moment format="MMM D, YYYY" withTitle>
            {props.date}
          </Moment>
        }
      />
      {props.imageUrl ? (
        <>
          <CardMedia
            className={classes.media}
            image={
              `https://res.cloudinary.com/${CloudName}/image/upload/c_crop,g_custom/v1/` +
              props.imageUrl
            }
            title="AcadVault"
          />
        </>
      ) : (
        <>
          <video width="300" height="200" controls>
            <source
              type="video/mp4"
              data-reactid=".0.1.0.0.0"
              src={
                `https://res.cloudinary.com/${CloudName}/video/upload/q_auto/v1588194153/` +
                props.videoUrl
              }
            ></source>
          </video>
        </>
      )}

      <CardContent>
        <Typography
          className="desc"
          variant="body2"
          color="textSecondary"
          component="p"
        >
          <Linkify properties={{ target: '_blank' }}>
            {props.description ? props.description : ''}
          </Linkify>
        </Typography>
      </CardContent>
      <CardActions disableSpacing>
        <Box alignItems="center" display={'flex'}>
            <IconButton
              style= {{paddingRight:0}}
              onClick={() => {
                handleLike(selected);
                selected
                  ? setLikeCount(likeCount - 1)
                  : setLikeCount(likeCount + 1);
                setSelected(!selected);
              }}
            >
              {selected ? (
                <FavoriteIcon color="secondary" />
              ) : (
                <FavoriteIcon />
              )}
            </IconButton>
          <Box l={3} p={1} b={4}>
            <Typography style={{ fontSize: '1.15rem' }}>
              {likeCount}
            </Typography>
          </Box>
          <Box display={'flex'}>
            <IconButton aria-label="share">
              <CommentIcon />
            </IconButton>
            <Typography style={{ fontSize: '1.15rem', marginTop: '.5rem' }}>
              {' '}
              {props.comments.length}
            </Typography>
          </Box>
        </Box>
        <IconButton
          className={clsx(classes.expand, {
            [classes.expandOpen]: expanded,
          })}
          onClick={handleExpandClick}
          aria-expanded={expanded}
          aria-label="show more"
        >
          <ExpandMoreIcon />
        </IconButton>
      </CardActions>
      <Collapse in={expanded} timeout="auto" unmountOnExit>
      <Divider/>
        <CardContent>
          
          <Typography variant="h6" className={classes.title}>
            Comments
          </Typography>
          <AddComment
            name={name}
            postId={props._id}
            userId={userId}
            username={username}
          />

          {comments
            ? comments.map((comment) => (
                <Comment
                  {...comment}
                  key={comment.date}
                  // onClick={handleComments}
                />
              ))
            : null}
        </CardContent>
      </Collapse>
    </Card>
  );
}