"use client";

import React, { useRef, useState } from "react";
import { Image } from "antd-mobile";
import { useRouter } from "next/navigation";
import baseRequest from "@/utils/baseRequest";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
export default function PaySpacePost({
  type = "ironFan",
  status = 0,
  is_ironfan_visible = false,
  data = {},
  isCreator,
}) {
  const base = baseRequest();
  const router = useRouter();
  return (
    <>
      {isCreator ? (
        <div
          className={`w-full flex flex-col px-2 py-2 my-2 rounded-md bg-[${
            type === "ironFan" ? "#301024" : "#331F0B"
          }]`}
        >
          <div
            className="flex flex-row justify-between items-center"
            style={{
              color: data.is_ironfan_visible === 1 ? "#FF669E" : "#FFD685",
            }}
            onClick={() => {
              router.push("/space/postPurchasers?id=" + data?.id);
            }}
          >
            <div className="flex flex-row items-center">
              <Image
                src={
                  process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                  (data.is_ironfan_visible === 1
                    ? "/icons/money_pink.png"
                    : "/icons/money_gold.png")
                }
                width={20}
                className="mr-1"
              />
              <span className={`text-base font-semibold ml-1`}>
                {data.price / 100}
              </span>
              <span className={`text-sm`}>元</span>
            </div>
            <div className="flex items-center">
              <p className={`text-sm font-medium`}>共{data.buyer_cnt}人购买</p>
              <div className="ml-1 flex items-center">
                <FontAwesomeIcon
                  icon={faAngleRight}
                  color={data.is_ironfan_visible === 1 ? "#FF669E" : "#FFD685"}
                  style={{ maxWidth: "12px" }}
                  size="sm"
                />
              </div>
            </div>
          </div>
          {data.is_ironfan_visible === 1 && (
            <p className="text-xs text-[#FFFFFF40] mt-1">
              空间内任意消费满{data.ironfanship_price / 100}元即可成为铁粉
            </p>
          )}
        </div>
      ) : (
        <div
          className={`rounded-md ${
            type === "ironFan" ? "bg-primary-500" : "bg-super-500"
          } px-2 py-2 my-2 text-sm`}
        >
          <div
            className={`flex justify-between items-center text-sm ${
              type === "ironFan" ? "text-primary" : "text-super"
            }`}
            onClick={() => {
              if (!data.is_zone_moment_unlocked) {
                router.push(
                  "/webView/" +
                    encodeURIComponent(
                      "/zone/pay/" +
                        data?.zid +
                        "/h5_zone_moment/" +
                        data?.id +
                        "?base=" +
                        encodeURIComponent(JSON.stringify(base))
                    )
                );
              }
            }}
          >
            <div className="flex items-center">
              <Image
                width={18}
                height={18}
                placeholder=""
                className="mr-2"
                src={
                  process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                  (type === "ironFan"
                    ? "/icons/money_pink.png"
                    : "/icons/money_gold.png")
                }
              />
              <p className="flex justify-center items-center">
                <span className="text-base font-semibold ml-1">
                  {data.price / 100}
                </span>
                <span className="text-sm">元</span>
              </p>
            </div>
            <div className="flex items-center">
              {!data.is_zone_moment_unlocked ? (
                <span>
                  {data.is_ironfan_visible === 1
                    ? "铁粉免费查看"
                    : data.is_superfanship_enabled === 1
                    ? "超粉免费查看"
                    : "付费解锁"}
                </span>
              ) : (
                <span>
                  {data.is_ironfanship_unlocked === 1 &&
                    data.is_ironfan_visible === 1 &&
                    "已使用铁粉特权解锁"}
                  {data.is_superfanship_unlocked === 1 &&
                    data.is_ironfan_visible === 0 &&
                    "已使用超粉特权解锁"}
                  {data.is_superfanship_unlocked === 0 &&
                    data.is_ironfan_visible === 0 &&
                    "已付费解锁"}
                  {data.is_ironfanship_unlocked === 0 &&
                    data.is_ironfan_visible === 1 &&
                    "已付费解锁"}
                </span>
              )}
              <Image
                height={12}
                fit="contain"
                placeholder=""
                className="ml-2"
                src={
                  process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                  (type === "ironFan"
                    ? "/icons/pinklink.png"
                    : "/icons/goldlink.png")
                }
              />
            </div>
          </div>
          {is_ironfan_visible && (
            <p
              className="text-xs mt-2 text-[#FFFFFF40]"
              // style={{ color: type === "ironFan" ? "#ff669e54" : "#FFD68554" }}
            >
              空间内任意消费满{data.ironfanship_price / 100}元即可成为铁粉
            </p>
          )}
        </div>
      )}
    </>
  );
}