"use client";

import React, { useEffect, useState } from "react";
import { Mask, Image,Button } from "antd-mobile";
import {getStreamer} from "@/api/streamer";
import { useRouter } from "next/navigation";
import {remove} from "@/utils/storeInfo"
export default function StreamerNavigator({
  userId,
}) {
  const [streamerInfo,setStreamerInfo] = useState(null);
  const router = useRouter();

  useEffect(()=>{
    userId && getStreamer(userId).then(res=>{
      setStreamerInfo(res);
    })
  },[])
  const handleCloseMask = ()=>{
    remove("inviter")
    setStreamerInfo(null)
  }
  return (
    <Mask visible={(!!streamerInfo)} onMaskClick={handleCloseMask}>
      <div
        className="fixed top-[20%] left-[12.5%]  w-3/4 flex-1 justify-center items-center "

      >
        <div
          className="rounded-2xl bg-[#1E1C29] items-center overflow-hidden"
        >
          <div className="flex flex-col w-full">
            <Image
              src={streamerInfo?.streamer_ext?.cover?.images[0]?.urls[0]}
              fit="cover"
              style={{ aspectRatio: 1}}
              className="w-full"
            />
            <div className="p-4">
              <div className="flex flex-row items-center">
                <p
                  className="text-xl text-white font-medium mr-1"
                >
                  {streamerInfo?.streamer_ext?.name}
                </p>
                <div className="w-5 h-5">
                  <Image src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/verification.png"} />
                </div>
              </div>
              <p className="text-sm text-[#FFFFFFB2] mt-1 truncate ">
                {!streamerInfo?.streamer_ext?.zones?.length ? streamerInfo?.streamer_ext?.bio:streamerInfo?.streamer_ext?.zones[0]?.profile}
              </p>
              <div
                onClick={
                  streamerInfo?.streamer_ext?.zones?.length === 0
                    ? () => {
                        handleCloseMask();
                        router.replace("/profile/"+streamerInfo?.streamer_ext?.mid);
                      }
                    : () => {
                        handleCloseMask();
                        router.replace("/space/person_space_introduce/"+streamerInfo?.streamer_ext?.mid);
                      }
                }
                className="w-full p-2 mt-4 text-base rounded-full bg-[#FF669E] text-center"
              >
                {streamerInfo?.streamer_ext?.zones?.length === 0 ? "查看主页" : "查看空间"}
              </div>
            </div>
          </div>
        </div>
      </div>
    </Mask>
  );
}