/* eslint-disable no-console */
/* eslint-disable no-underscore-dangle */
import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { StyleSheet } from "react-native";
import { useModel } from "flooks";
import { Layout, useTheme } from "@ui-kitten/components";
import { SearchBar } from "@ant-design/react-native";
import { useFocusEffect } from "@react-navigation/native";
import NavHeaderBar from "../../components/NavHeaderBar";
import GoodsCardLarge from "../../components/GoodsCard";
import ListComponent from "../../components/ListComponent";

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  bntLay: {
    paddingVertical: 5,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#EEEEEE",
    flexShrink: 0,
  },
  list: {
    flex: 1,
    backgroundColor: "#EEEEEE",
    paddingHorizontal: 10,
  },
});

export default function SearchScreen({ navigation }) {
  const theme = useTheme();
  const { changeBackground } = useModel("barModel");
  const { mid } = useModel("userModel");
  const { httpGet } = useModel("httpModel");
  const { SHKVCV, cancel, XZOCQU } = useModel("wordsModel");
  const [startState, changeStart] = React.useState(false);
  const [searchKey, setSearchKey] = React.useState("");
  const [inputVal, setVal] = React.useState("");

  function getAllGoods(page, size) {
    return httpGet("/goods/all", {
      size,
      page,
      search: searchKey,
      query: {
        merchantId: mid,
      },
      sort: "id,desc",
    }).then(res => {
      changeStart(false);
      return Promise.resolve(res);
    });
  }

  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme["color-primary-500"]);
      //   changeStart(true);
    }, [])
  );

  const goodsItem = ({ item }) => (
    <GoodsCardLarge
      appearance="classification"
      type="goodsList"
      key={item.id}
      info={item}
      canEdit
      style={{ marginBottom: 7 }}
      onPress={() => {
        navigation.navigate("GoodsDetailMore", {
          goodsId: item.id,
        });
      }}
      changeInfo={info => {
        // eslint-disable-next-line no-console
        console.log(info);
        changeStart(true);
      }}
    />
  );

  return (
    <>
      <NavHeaderBar title={SHKVCV} />
      <Layout style={styles.container}>
        <SearchBar
          placeholder={XZOCQU}
          value={inputVal}
          onChange={setVal}
          onSubmit={value => {
            setSearchKey(value);
            changeStart(true);
          }}
          onCancel={() => {
            if (inputVal) {
              setVal("");
              setSearchKey("");
              changeStart(true);
            } else {
              navigation.goBack();
            }
          }}
          cancelText={inputVal ? cancel : "返回"}
          showCancelButton
        />
        <ListComponent
          startState={startState}
          renderItem={goodsItem}
          getInfo={getAllGoods}
          showEmpty
          style={styles.list}
          saveList
        />
      </Layout>
    </>
  );
}