import { formatDistanceToNow, formatRFC7231 } from "date-fns";
import htmlParse from "html-react-parser";
import Link from "next/link";
import React from "react";
import styled from "styled-components";
import urls from "../lib/urls";

const StyledArticle = styled.article`
  padding: ${(props) => props.theme.spacing[2]};
  font-size: ${(props) => props.theme.fontSize.sm[0]};
  line-height: ${(props) => props.theme.fontSize.sm[1].lineHeight};
  a {
    color: ${(props) => props.theme.colors.black};
  }
`;

const StyledHeader = styled.header`
  font-size: ${(props) => props.theme.fontSize.xs[0]};
  line-height: ${(props) => props.theme.fontSize.xs[1].lineHeight};
  color: ${(props) => props.theme.colors.gray};
  margin-bottom: ${(props) => props.theme.spacing[0.5]};
`;

const StyledUl = styled.ul`
  padding: 0;
  margin: 0;
  list-style: none;
`;

const StyledLi = styled.li`
  display: inline;
  & + &::before {
    content: "|";
    padding-right: ${(props) => props.theme.spacing[1]};
    padding-left: ${(props) => props.theme.spacing[1]};
  }
`;

const StyledAddress = styled.address`
  display: inline;
`;

const Comment = ({ comment }) => (
  <StyledArticle>
    <StyledHeader>
      <StyledUl>
        <StyledLi>
          <StyledAddress>{comment.author}</StyledAddress>
        </StyledLi>
        <StyledLi>
          <time
            dateTime={comment.created_at}
            title={formatRFC7231(new Date(comment.created_at))}
          >
            {`${formatDistanceToNow(new Date(comment.created_at))} ago`}
          </time>
        </StyledLi>
        <StyledLi>
          <a href={comment.story_url}>{comment.story_title}</a>
        </StyledLi>
        <StyledLi>
          <Link href={urls.story(comment.story_id)}>
            <a>comments</a>
          </Link>
        </StyledLi>
        <StyledLi>
          <a href={urls.hnComment(comment.story_id, comment.objectID)}>
            view in thread
          </a>
        </StyledLi>
      </StyledUl>
    </StyledHeader>
    {htmlParse(comment.comment_text)}
    <footer>
      <a href={urls.hnReply(comment.objectID)}>reply</a>
    </footer>
  </StyledArticle>
);

export default Comment;