"use client";

import React, { useEffect, useState, useMemo } from "react";
import Photos from "../Photos";
import { useRouter } from "next/navigation";
import PaySpacePost from "../PaySpacePost";
import { Image } from "antd-mobile";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
export default function PostItem({
  type,
  follow,
  date = new Date(),
  data = {},
}) {
  const router = useRouter();
  const [isOpenText, setIsOpenText] = useState(false);
  useEffect(() => {
    return () => {
      router.prefetch("/profile");
    };
  }, []);
  const getDays = useMemo(() => {
    const today = new Date();
    const days = Math.floor((today - date) / (1000 * 60 * 60 * 24));
    return days;
  }, []);
  return (
    <div>
      {type == "space" && (
        <Image src="/images/top_post.png" width={76} className="mb-2" />
      )}
      <div className="flex">
        <img
          className="flex-none w-8 h-8 rounded-full mr-2"
          src={data.streamer_ext?.avatar.images[0].urls[0]}
          alt=""
          onClick={() => router.push("/profile")}
        />

        <div className="flex-1">
          <div className="flex justify-between items-center">
            <span className="font-bold text-md">{data.streamer_ext?.name}</span>
            {type == "post" && (
              <span className="rounded-full bg-[#FFFFFF1A] px-2 py-1 text-xs text-white font-medium">
                {data.is_followed ? "已关注" : "关注"}
              </span>
            )}
          </div>
          <div>
            <p className={`mb-2 mt-2 ${!isOpenText ? "text-ellipsis-3" : ""}`}>
              {data.text}
            </p>
            {
              data.text?.length>50 &&
              <div
              className="font-bold text-btn my-4 text-base"
              onClick={() => setIsOpenText(!isOpenText)}
            >
              {isOpenText ? "收起" : "全文"}
            </div>
            }
          </div>
          {data.media_component && <Photos media={data.media_component} />}
          {type == "space" && (
            <PaySpacePost type="superFan" price="19.89" status={0} />
          )}
          <div className="flex justify-between items-center mt-2">
            {type == "post" ? (
              <div className="flex items-center">
                {
                  data.is_active_within_a_week && 
                  <>
                  <Image
                  src="/icons/space_new_post.png"
                  width={18}
                  className="w-4 h-full mr-1"
                  placeholder=""
                />
                <span className="mr-1 text-primary text-xs">
                  {data.days_elapsed_since_the_last_zones_update < 7
                    ? `空间${
                        data.days_elapsed_since_the_last_zones_update === 0
                          ? "今日"
                          : "new" === 1
                          ? "昨日"
                          : "new" === 2
                          ? "前天"
                          : data.days_elapsed_since_the_last_zones_update + "天前"
                      }有更新`
                    : "1" === 2
                    ? "空间今日有更新"
                    : ""}
                </span>
                <FontAwesomeIcon icon={faAngleRight} color="#FF669E" size="sm" />
                  </>
                }
              </div>
            ) : (
              <div className="text-[#ffffff88] text-xs">
                <span className="mr-2">
                  {getDays < 3
                    ? `${
                        getDays === 0 ? "今日" : "new" === 1 ? "昨日" : "前天"
                      }`
                    : date.getMonth() + 1 + "月" + date.getDate() + "日"}
                </span>
                <span>{date.getHours() + ":" + date.getMinutes()}</span>
              </div>
            )}
            <div className="flex items-center">
              <div className="flex items-center mr-4">
                <Image
                  src={data.is_thumbed_up ? "/icons/thumbup.png":"/icons/notthumbup.png"}
                  width={32}
                  className="w-4 h-full"
                  placeholder=""
                />
                <span className="text-xs">点赞</span>
              </div>
              <span className="mr-2">···</span>
            </div>
          </div>
          {/* <div className="rounded-full h-px bg-gray-200 mt-2"></div> */}
        </div>
      </div>
    </div>
  );
}