import { View, Text, Image } from "@tarojs/components";
import img from "@/config/images";
import { getCurrentLocation } from "@/utils/locationUtils";
import styles from "./index.module.scss";
import { useEffect } from "react";
import { useGlobalState } from "@/store/global";
import { useListState } from "@/store/listStore";
import CustomNavbar from '@/components/CustomNavbar'

const ListHeader = () => {
  const {
    updateState,
    location,
    getLocationText,
    getLocationLoading,
    statusNavbarHeightInfo,
  } = useGlobalState();
  const { gamesNum } = useListState();
  const { statusBarHeight, navbarHeight } = statusNavbarHeightInfo;

  // 获取位置信息
  const getCurrentLocal = () => {
    updateState({
      getLocationLoading: true,
    });
    getCurrentLocation().then((res) => {
      updateState({
        getLocationLoading: false,
        location: res || {},
      });
    });
  };
  useEffect(() => {
    getCurrentLocal();
  }, []);

  const currentAddress = getLocationLoading
    ? getLocationText
    : location?.address;

  return (
    <CustomNavbar>
      <View
        className={styles.container}
        style={{
          height: `${navbarHeight}px`,
          paddingTop: `${statusBarHeight}px`,
        }}
      >
        {/* logo */}
        <Image src={img.ICON_LOGO} className={styles.logo} />
        <View className={styles.line} />
        <View className={styles.content}>
          <View className={styles.cityWrapper}>
            {/* 位置 */}
            <Text className={styles.city}>{currentAddress}</Text>
            {!getLocationLoading && (
              <Image src={img.ICON_CHANGE} className={styles.change} />
            )}
          </View>
          <View className={styles.infoWrapper}>
            <Text className={styles.info}>附近${gamesNum}场球局</Text>
          </View>
        </View>
      </View>
    </CustomNavbar>
  );
};
export default ListHeader;