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

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",
    paddingTop: 10,
    paddingHorizontal: 15,
  },
});

export default function EditGoods({ navigation }) {
  const theme = useTheme();
  const { changeBackground } = useModel("barModel");
  // const {  } = useModel("userModel");
  const { httpGet } = useModel("httpModel");
  const [goods, changeGoods] = React.useState("");
  const { userTitle3, addGoods2 } = useModel("wordsModel");

  function getAllGoods() {
    httpGet("/goods/my").then(res => {
      changeGoods(res);
    });
  }
  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme["color-primary-500"]);
      getAllGoods();
    }, [])
  );

  const goodsItem = ({ item, index }) => (
    <GoodsCardLarge
      appearance="classification"
      type="goodsList"
      key={item.id}
      info={item}
      canEdit
      style={{ marginBottom: 7 }}
      onPress={() => {
        navigation.navigate("GoodsDetailMore", {
          goodsId: item.id,
        });
      }}
      changeInfo={info => {
        const _goods = [...goods];
        _goods.splice(index, 1, info);
        changeGoods(_goods);
      }}
    />
  );

  return (
    <>
      <NavHeaderBar title={userTitle3} />
      <Layout style={styles.container}>
        <Layout style={styles.bntLay}>
          <Button
            onPress={() => {
              navigation.navigate("AddGoods");
            }}
          >
            {addGoods2}
          </Button>
        </Layout>
        <List
          style={styles.list}
          data={goods}
          renderItem={goodsItem}
          ListEmptyComponent={EmptyComponent}
        />
      </Layout>
    </>
  );
}