import { View, Image } from "@tarojs/components";
import img from "@/config/images";
import { getCurrentLocation } from "@/utils/locationUtils";
import "./index.scss";
import { useEffect } from "react";
import { useGlobalState } from "@/store/global";
import { useListState } from "@/store/listStore";
import CustomNavbar from "@/components/CustomNavbar";
import { Input } from "@nutui/nutui-react-taro";
import Taro from "@tarojs/taro";

interface IProps {
  icon: string;
}

const ListHeader = (props: IProps) => {
  const { icon } = props;
  const { updateState, statusNavbarHeightInfo } = useGlobalState();
  const { searchValue } = useListState();
  const { statusBarHeight, navbarHeight } = statusNavbarHeightInfo;

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

  const handleInputClick = () => {
    Taro.navigateTo({
      url: "/pages/search/index",
    });
  }

  return (
    <CustomNavbar>
      <View
        className="inputCustomerNavbarContainer"
        style={{
          height: `${navbarHeight}px`,
          paddingTop: `${statusBarHeight}px`,
        }}
      >
        <View className="navContent">
          {/* logo */}
          <Image src={icon} className="logo" />
          {/* 搜索框 */}
          <View className="searchContainer">
            <Image
              className="searchIcon icon16"
              src={img.ICON_LIST_SEARCH_SEARCH}
            />
            <Input
              placeholder="搜索上海的球局和场地"
              clearable={false}
              value={searchValue}
              onClick={handleInputClick}
            />
          </View>
        </View>
      </View>
    </CustomNavbar>
  );
};
export default ListHeader;