import { Check } from "@truststack/icons-ui";
import { useEffect, useState } from "react";
import { FlatList } from "react-native-web";
import { View, YStack } from "tamagui";
import { Divider } from "./Divider";
import { ListItem } from "./List";
import { ListFooter } from "./ListFooter";
import { SearchBar } from "./Search";
import { useDebounce } from "./utils";
import { jsx, jsxs } from "react/jsx-runtime";
function SearchList({
  value,
  onChange,
  searchFunc,
  placeholder = "Search..."
}) {
  const [searching, setSearching] = useState(void 0), [search, setSearch] = useState(""), [results, setResults] = useState([]), debounce = useDebounce(search, 1e3);
  return useEffect(() => {
    debounce?.length && (setSearching(!0), searchFunc(debounce).then(setResults).finally(() => setSearching(!1)));
  }, [debounce]), /* @__PURE__ */ jsxs(YStack, { gap: 12, children: [
    /* @__PURE__ */ jsx(View, { margin: "$spacing.margin_compact", children: /* @__PURE__ */ jsx(
      SearchBar,
      {
        placeholder,
        value: search,
        onChangeText: setSearch
      }
    ) }),
    /* @__PURE__ */ jsx(
      FlatList,
      {
        data: results,
        ItemSeparatorComponent: Divider,
        ListFooterComponent: /* @__PURE__ */ jsx(
          ListFooter,
          {
            loading: searching,
            noResults: !!search && searching === !1 && !results?.length
          }
        ),
        renderItem: ({ item }) => /* @__PURE__ */ jsxs(ListItem, { pressable: !0, line: "one", onPress: () => onChange(item.value), children: [
          /* @__PURE__ */ jsx(ListItem.Container, { children: /* @__PURE__ */ jsx(ListItem.Headline, { adjustsFontSizeToFit: !0, numberOfLines: 1, children: item.label }) }),
          item.value == value && /* @__PURE__ */ jsx(ListItem.TrailingIcon, { Icon: Check })
        ] })
      }
    )
  ] });
}
export {
  SearchList
};
//# sourceMappingURL=SearchList.js.map
