import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { StyleSheet, View } from "react-native";
import { useModel } from "flooks";
import { useTheme, Button } from "@ui-kitten/components";
import { useFocusEffect } from "@react-navigation/native";
import NavHeaderBar from "../../components/NavHeaderBar";
import Coupon from "../../components/Coupon";

import ListComponent from "../../components/ListComponent";

const styles = StyleSheet.create({
  top: {
    alignItems: "center",
    paddingVertical: 10,
    marginBottom: 10,
  },
  list: {
    flex: 1,
    backgroundColor: "rgb(242, 242, 242)",
    paddingHorizontal: 15,
  },
  separatorStyle: {
    marginHorizontal: 13,
  },
});

export default function CouponListScreen({ navigation }) {
  const theme = useTheme();
  const { changeBackground } = useModel("barModel");
  // const {} = useModel("wordsModel");
  const { getMyList, delCoupon } = useModel("couponModel");
  const [startState, changeStart] = React.useState(false);

  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme["color-primary-500"]);

      changeStart(true);
    }, [])
  );

  function getList(page, size) {
    return getMyList(page, size).then(res => {
      changeStart(false);
      return Promise.resolve(res);
    });
  }

  const walletItem = ({ item, index }) => (
    <Coupon
      key={index}
      info={item}
      delEvent={() => {
        delCoupon(item.id, () => {
          changeStart(true);
        });
      }}
      onPress={() => {
        navigation.navigate("CouponAdd", {
          id: item.id,
        });
      }}
    />
  );

  return (
    <>
      <NavHeaderBar title="优惠券管理" />
      <View style={styles.top}>
        <Button
          appearance="outline"
          onPress={() => {
            navigation.navigate("CouponAdd");
          }}
        >
          新增优惠券
        </Button>
      </View>
      <ListComponent
        getInfo={getList}
        renderItem={walletItem}
        style={styles.list}
        separatorStyle={styles.separatorStyle}
        showEmpty
        startState={startState}
      />
    </>
  );
}