import React from "react";
import {useLocation, useNavigate} from "react-router-dom";
import dayjs from "dayjs";
import * as relativeTime from "dayjs/plugin/relativeTime";

import Card from "components/card/Card.jsx";
import styles from "./Post.css";
import {getInfoFromSubreact} from "helpers/Location.jsx";

import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";

dayjs.extend(relativeTime);

function TopRow({title, timeUpdated}) {
    return (
        <div className={styles.titleContainer}>
            <h3>
                {title}
            </h3>
            <h4>
                {dayjs.unix(timeUpdated).fromNow()}
            </h4>
        </div>
    );
}

function MiddleRow({contents}) {
    return (
        <h4>
            {contents}
        </h4>
    );
}

function BottomRow({subreact}) {
    const {icon, name} = getInfoFromSubreact(subreact);

    return (
        <div className={styles.postIconsContainer}>
            <FontAwesomeIcon icon={icon} className={styles.subreactIcon} />
            <div>
                {name}
            </div>
        </div>
    );
}

export default function Post({title, contents, timeUpdated, placeholder, subreact, uid}) {
    const location = useLocation();
    const navigate = useNavigate();

    return (
        <Card className={styles.postCard + (placeholder ? " " + styles.placeholder : "")}
            onClick={() => {navigate("/" + subreact + "/" + uid);}}>
            <img src={placeholder ? null : "/image/" + uid + ".png?thumbnail=1"} />
            <div className={styles.rowContainer}>
                <TopRow title={title} timeUpdated={timeUpdated} />
                <MiddleRow contents={contents} />
                <BottomRow subreact={subreact} />
            </div>
        </Card>
    );
}