import "../css/Article.css"

import React, { useEffect, useState, useContext} from 'react';
import cookie from 'react-cookies';
import {Routes, Route, Link, useNavigate, Navigate, useParams  } from 'react-router-dom';

import { UserContext, ArticleContext } from '../Context.js';

import { DateTime } from 'luxon';
import axios from 'axios';
axios.defaults.withCredentials = true;

function Comments({data}) {
  const {
    _id, content, author, createdAt} = data;
  let params = useParams();
  const navigate = useNavigate();
  function MoveTo(link){
    navigate(link)
  }	
  const articleContext = useContext(ArticleContext);
  const userinfo = cookie.load('name')
  const date = DateTime.fromISO(createdAt).toFormat('yyyy년 MM월 dd일 HH:mm');
  console.log(articleContext)
  function DeleteComment(e) {
    const data = {id: _id}
    axios
      .delete(`http://localhost:8080/post/comment/${params.id}/${_id}`, data,
        {
            headers: {"Content-Type": 'application/json'}
        })
      .then(res => {
        alert("The comment is successfully deleted");
        return articleContext.requestLoadArticleById(params.id)
      })
      .then(res => {
        articleContext.setArticle(res.data)
      })
      .catch(err => {
        console.error(err);
      });
  };

  if (userinfo.id===author.email) {
    return (
      <div class="comment" style={{display: 'flex'}}>
        <p>{author.nickname}</p>
        <p>{content}</p>
        <p>{date}</p>
        <button style={{height: '30px'}}  onClick={DeleteComment} type="submit">지우기</button>
      </div>
    );
  }
  else {
    return (
      <div class="comment" style={{display: 'flex'}}>
        <p>{author.nickname}</p>
        <p>{content}</p>
        <p>{date}</p>
      </div>
    );
  }

}

export default Comments;