import { View } from "@tarojs/components";
// import styles from "./index.scss";
import CityFilter from "@/components/CityFilter";
import Menu from "@/components/Menu";
import { useListState } from "@/store/listStore";
import ListContainer from "@/container/listContainer";

import "./index.scss";

const SearchResult = () => {
  const {
    distanceData,
    quickFilterData,
    distanceQuickFilter,
    updateState,
    matches,
    loading,
    error,
    refreshMatches,
  } = useListState() || {};

  // 距离筛选
  const handleDistanceOrQuickChange = (name, value) => {
    updateState({
      distanceQuickFilter: {
        ...distanceQuickFilter,
        [name]: value,
      },
    });
  };

  return (
    <View>
      {/* 筛选 */}
      <View className='searchResultFilterWrapper'>
        {/* 全城筛选 */}
        <CityFilter
          options={distanceData}
          value={distanceQuickFilter?.distance}
          wrapperClassName='menuFilter'
          onChange={handleDistanceOrQuickChange}
          name="distance"
        />
        {/* 智能排序 */}
        <Menu
          options={quickFilterData}
          value={distanceQuickFilter?.quick}
          onChange={handleDistanceOrQuickChange}
          wrapperClassName='menuFilter'
          name="quick"
        />
      </View>

      {/* 列表内容 */}
      <ListContainer
        data={matches}
        loading={loading}
        error={error}
        reload={refreshMatches}
      />
    </View>
  );
};

export default SearchResult;