import React, { useState, useEffect } from "react";
import { View, Text, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import "./index.scss";
import { useGlobalState } from "@/store/global";
import { GeneralNavbar } from "@/components";
import httpService from "@/services/httpService";

const JoinGroupPage: React.FC = () => {
  // 获取导航栏高度信息
  const { statusNavbarHeightInfo } = useGlobalState() || {};
  const { totalHeight = 98 } = statusNavbarHeightInfo || {};

  const [url, setUrl] = useState("");

  useEffect(() => {
    const getQrCode = async () => {
      const res = await httpService.post("/parameter/many_key", {
        keys: "QRCode",
      });
      setUrl(res.data.QRCode);
    };
    getQrCode();
  }, []);

  return (
    <View className="page_container">
      {/* 顶部导航栏 */}
      <GeneralNavbar
        title=""
        showBack={true}
        showAvatar={false}
        onBack={() => {
          Taro.navigateBack();
        }}
      />
      {/* 主要内容 */}
      <View className="main_content" style={{ paddingTop: `${totalHeight}px` }}>
        <Text className="title-text">你应该会想加入这里</Text>
        <Text>你会在这里遇见相似的人，和更好的自己。</Text>
        <Image
          className="qrcode"
          mode="scaleToFill"
          src={url}
          showMenuByLongpress
        ></Image>
        <Text className="hint-text">长按保存图片👆使用微信扫码加入群聊</Text>
        <Text>你不是一个人在寻找球友。</Text>
        <Text>你想认识的人，也在找你。</Text>
        <Text>每一个热爱运动的人，</Text>
        <Text>都在这里相遇。</Text>
      </View>
    </View>
  );
};

export default JoinGroupPage;