import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { StyleSheet } from "react-native";
import { setModel, useModel } from "flooks";
import { useFocusEffect } from "@react-navigation/native";
import { Layout, Button, TabBar, Tab, useTheme } from "@ui-kitten/components";
import NavHeaderBar from "../components/NavHeaderBar";
import OrderCard from "../components/OrderCard";
import ListComponent from "../components/ListComponent";

// 订单功能模块
import orderInfoModel from "../models/orderInfoModel";

// const Tab = createMaterialTopTabNavigator();

const orderStatus = ["NOT_RECEIVED", "RECEIVED", "REJECTED", "COMPLETED"];

const styles = StyleSheet.create({
  tabBack: {
    backgroundColor: "#eee",
    borderWidth: 0,
  },
  indicatorStyle: {
    backgroundColor: "#FFC21C",
  },
  buttonGroup: {
    justifyContent: "center",
    paddingVertical: 7,
    flexDirection: "row",
    backgroundColor: "#eee",
  },
  separatorStyle: {
    height: 0,
  },
  list: {
    flex: 1,
    backgroundColor: "#eee",
    marginTop: 10,
  },
  label: {
    backgroundColor: "#eee",
  },
});

export default function OrderScreen({ navigation }) {
  const {
    NOT_RECEIVED,
    RECEIVED,
    REJECTED,
    COMPLETED,
    tab2,
    orderTitleBtn2,
    KWQKHQ,
    DTEOMV,
    GLWBTR,
  } = useModel("wordsModel");

  const { automaticOrder, updateMerchant } = useModel("userModel");
  const { success } = useModel("loadingModel");

  const theme = useTheme();

  setModel("orderInfoModel", orderInfoModel);
  const { getOrderList } = useModel("orderInfoModel");
  const [startState, changeStart] = React.useState(false);
  const [selectedIndex, setSelectedIndex] = React.useState(0);
  const { changeBackground } = useModel("barModel");
  const { clearLoading } = useModel("loadingModel");
  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme["color-primary-500"]);
      setSelectedIndex(0);
      changeStart(true);
    }, [])
  );
  const orderItem = ({ item }) => (
    <OrderCard
      style={{ marginHorizontal: 10, marginBottom: 15 }}
      appearance="classification"
      key={item.id}
      info={item}
      updateInfo={() => {
        changeStart(true);
      }}
    />
  );

  function getList(page, size) {
    const query = {
      merchantStatus: orderStatus[selectedIndex],
      cancel: false,
    };
    return getOrderList(page, size, query).then(res => {
      changeStart(false);
      clearLoading();
      return Promise.resolve(res);
    });
  }

  return (
    <>
      <Layout style={[styles.tabBack, { flex: 1 }]}>
        <NavHeaderBar title={tab2} />
        <Layout style={styles.buttonGroup}>
          <Button
            style={{ marginRight: 10 }}
            appearance={automaticOrder ? "outline" : "filled"}
            onPress={() =>
              updateMerchant({
                automaticOrder: !automaticOrder,
              }).then(() => {
                success(DTEOMV);
              })
            }
          >
            {automaticOrder ? KWQKHQ : GLWBTR}
          </Button>
          <Button
            appearance="outline"
            status="success"
            onPress={() => {
              navigation.navigate("OrderSetting");
            }}
          >
            {orderTitleBtn2}
          </Button>
        </Layout>
        <TabBar
          selectedIndex={selectedIndex}
          indicatorStyle={styles.indicatorStyle}
          style={styles.label}
          onSelect={index => {
            setSelectedIndex(index);
            changeStart(true);
          }}
        >
          <Tab appearance="homeTab" title={NOT_RECEIVED} />
          <Tab appearance="homeTab" title={RECEIVED} />
          <Tab appearance="homeTab" title={REJECTED} />
          <Tab appearance="homeTab" title={COMPLETED} />
        </TabBar>

        <ListComponent
          initialNumToRender={3}
          getInfo={getList}
          renderItem={orderItem}
          style={styles.list}
          separatorStyle={styles.separatorStyle}
          showEmpty
          startState={startState}
        />
      </Layout>
    </>
  );
}