"use client";

import React, { useEffect, useState } from "react";
import { Mask, Image } from "antd-mobile";
import { getStreamer } from "@/api/streamer";
import { useRouter } from "next/navigation";
import { connect } from "react-redux";
import { changeInviter } from "@/store/actions";
function StreamerNavigator({ userId, changeInviter }) {
  const [streamerInfo, setStreamerInfo] = useState(null);
  const router = useRouter();

  useEffect(() => {
    userId &&
      getStreamer(userId).then((res) => {
        setStreamerInfo(res);
      });
  }, []);
  const handleCloseMask = () => {
    changeInviter(null);
    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>
  );
}

const mapStateToProps = ({ reducer }) => {
  return {
    userId: parseInt(reducer.inviter, 10),
  };
};
const mapDispatchToProps = {
  changeInviter,
};
export default connect(mapStateToProps, mapDispatchToProps)(StreamerNavigator);