import React from "react";
import { formatTimestamp } from "@/utils/tools";
import { Toast } from "antd-mobile";
import { useRouter } from "next/navigation";
import OwnImage from "@/components/OwnImage";
import OwnIcon from "@/components/OwnIcon";
import baseRequest from "@/utils/baseRequest";

export default function NoticeItem({ leftIcon, hasLink, data }) {
  const router = useRouter();
  const base = baseRequest();

  return (
    <div className="bg-[#FFFFFF1A] rounded-2xl mb-2 py-[24px] px-[18px]">
      <div className="flex text-white">
        <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 truncate">{data?.title}</p>
            </div>
            <pre className="text-base font-medium my-2 whitespace-pre-wrap">
              {data?.message}
            </pre>
            {/* 链接跳转 */}
            {data?.hyperlinks && data?.hyperlinks[0].action && (
              <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]">
                  <OwnImage
                    outClassName="w-full h-full rounded-lg"
                    className="w-full h-full"
                    rounded="rounded-lg"
                    height="100%"
                    fit="cover"
                    src={data.thumbnail?.images[0].urls[0]}
                  />
                </div>
                <div
                  className="flex flex-row justify-between flex-1 px-4 items-center"
                  onClick={() => {
                    if (!data.is_valid) {
                      Toast.show({
                        icon: "fail",
                        content: "此链接已失效",
                        position: "top",
                      });
                      return;
                    }
                    const links = data?.hyperlinks;
                    if (links) {
                      if (links.length > 1) {
                        links[1]?.action === "app_router_path";
                        router.push(links[1]?.params);
                      } else {
                        if (links[0]?.action === "outward") {
                          // 在新的标签也打开
                          window.open(links[0]?.params);
                        } else {
                          // alert(links[0]?.params);
                          // alert(encodeURIComponent(links[0]?.params));
                          router.push(
                            `/webView/${encodeURIComponent(
                              links[0]?.params +
                                (links[0]?.action ===
                                  "webViewWithOutHeaderInward" ||
                                links[0]?.action === "webViewHeaderInward"
                                  ? `?base=${encodeURIComponent(
                                      JSON.stringify(base)
                                    )}`
                                  : "")
                            )}`
                          );
                        }
                      }
                    }
                  }}
                >
                  <span className="text-base font-medium mr-2">
                    {hasLink.text}
                  </span>
                  <div>
                    {/* <FontAwesomeIcon
                      icon={faAngleRight}
                      style={{ maxWidth: "12px" }}
                      size="xl"
                    /> */}
                    <OwnIcon
                      src="/icons/32DP/angleRight.png"
                      className="w-[20px] h-[20px]"
                    />
                  </div>
                </div>
              </div>
            )}
          </div>
          {/* 时间 */}
          <div>
            <span className="text-xs text-[#FFFFFF80]">
              {formatTimestamp(data?.push_time || data?.ct)}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}