import React, { useMemo } from "react";
import { formatTimestamp, goToPage } from "@/utils/tools";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
import { useRouter } from "next/navigation";
export default function NoticeItem({ navigation, leftIcon, hasLink, data }) {
  const router = useRouter();
  const currentLink = useMemo(() => {
    if (hasLink && data?.hyperlinks) {
      const hasAppLink = data.hyperlinks.filter(
        (it) => it.action === "app_router_path"
      )[0];
      return hasAppLink ?? null;
    }
  }, [data]);
  return (
    <div className="bg-[#FFFFFF1A] rounded-2xl mb-2 py-[24px] px-[18px]">
      <div className="flex">
        <div className="flex-1">
          {/* 内容 */}
          <div>
            {/* 文本内容 */}
            <div className="flex items-center">
              {/* 头像 */}
              <div className="flex justify-center items-center rounded-full mr-2 w-[28px] h-[28px]">
                {/* <Icon type="ionicon" name="megaphone" size={24} color="white" /> */}
                {leftIcon}
              </div>
              <p className="text-lg font-medium mr-2">{data?.title}</p>
            </div>
            <p className="text-base font-medium my-2">{data?.message}</p>
            {/* 链接跳转 */}
            {!!data?.link_text && (
              <div
                onClick={() => {}}
                className="rounded-xl p-2 flex flex-row items-center my-2 bg-[#FFFFFF1A]"
              >
                <div className="mr-2 bg-white rounded-lg w-[50px] h-[50px]">
                  {/* <NativeImage
                    // style={{ transform: [{ scale: 0.9 }] }}
                    width={120}
                    height={120}
                    source={data.thumbnail.images[0].urls[0]}
                  /> */}
                </div>
                <div
                  className="flex flex-row justify-between flex-1 px-4 items-center"
                  onClick={() => {
                    if (data?.hyperlinks) {
                      // const linkAndParams = goToPage(
                      //   data?.hyperlinks[1]?.params
                      // );
                      // if (linkAndParams) {
                      //   typeof linkAndParams === "object"
                      //     ? router.push(...linkAndParams)
                      //     : router.push(linkAndParams);
                      // }
                      router.push(data?.hyperlinks[1]?.params);
                    }
                  }}
                >
                  <span className="text-base font-medium mr-2">
                    {hasLink.text}
                  </span>
                  <div>
                    <FontAwesomeIcon
                      icon={faAngleRight}
                      style={{ maxWidth: "12px" }}
                      size="xl"
                    />
                  </div>
                </div>
              </div>
            )}
          </div>
          {/* 时间 */}
          <div>
            <span className="text-xs text-[#FFFFFF80]">
              {formatTimestamp(data?.push_time)}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}