"use client";

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

  useEffect(() => {
    console.log("+++++++", userId);
    userId &&
      getStreamer(userId)
        .then((res) => {
          if (!res) {
            Toast.show({
              content: "此达人不存在",
              position: "top",
            });
            return;
          }
          setStreamerInfo(res);
        })
        .catch((eeror) => {});
  }, [userId]);
  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">
            <OwnImage
              src={streamerInfo?.streamer_ext?.cover?.images[0]?.urls[0]}
              fit="cover"
              style={{ aspectRatio: 1 }}
              className="w-full h-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>
                <OwnIcon className="w-5 h-5" src="/icons/verification.png" />
              </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);