import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { useModel } from "flooks";
import {
  Layout,
  Input,
  Button,
  Text,
  ListItem,
  Icon,
} from "@ui-kitten/components";
import { StyleSheet, View } from "react-native";
import ListUtil from "../../Utils/ListUtil";
import { ClassificationUtil } from "../../Utils/SystemRuleUtil";
import ListComponent from "../../components/ListComponent";
import TipNavHeader from "../../components/TipNavHeader";

const ForwardIcon = props => (
  <Icon
    {...props}
    name="arrow-ios-forward"
    fill="#B4B4B4"
    style={{ width: 15, height: 15, fontWeight: 500 }}
  />
);
// 分类设置
export default function ClassificationManageScreen({ navigation, route }) {
  const {
    ClassificationManage,
    ClassificationManageText1,
    ClassificationManageText2,
    ClassificationManageText3,
    ClassificationManageText4,
    ClassificationManageText5,
    QRLPZQ,
    GIMSOZ,
  } = useModel("wordsModel");


  const { httpGet } = useModel("httpModel");

  function getList() {
    return httpGet("/classification/my").then(res => {
      return Promise.resolve({
        content: res,
        last: true,
      });
    });
  }

  const renderItem = ({ item, index }) => (
    <ListItem
      title={item.name}
      key={index}
      onPress={() => {
        if (new ClassificationUtil(item).checkSystem()) {
          navigation.navigate("SystemClassificationEdit", {
            classifyId: item.id,
            classifyTitle: item.name,
          });
        } else {
          navigation.navigate("ClassificationEdit", {
            classifyId: item.id,
            classifyTitle: item.name,
          });
        }
      }}
      accessoryRight={props => (
        <View style={styles.right}>
          {new ClassificationUtil(item).checkSystem() ? (
            <Text category="c1" status="info">
              {item.isOpen ? QRLPZQ : GIMSOZ}
            </Text>
          ) : (
            <Text category="c1" status="info">
              {new ListUtil(item.goodsIds).getLength()}
              件商品
            </Text>
          )}
          <ForwardIcon {...props} />
        </View>
      )}
    />
  );

  return (
    <>
      <TipNavHeader title={ClassificationManage}>
        <Text>{ClassificationManageText1}</Text>
        <Text style={styles.text1}>{ClassificationManageText2}</Text>
        <Text style={styles.text1}>{ClassificationManageText3}</Text>
        <Text style={styles.text1}>{ClassificationManageText4}</Text>
      </TipNavHeader>
      <Layout style={styles.top}>
        <Text category="h6">{ClassificationManageText5}</Text>
      </Layout>
      <ListComponent
        getInfo={getList}
        renderItem={renderItem}
        separatorStyle={styles.separatorStyle}
        showEmpty
        style={styles.list}
        ListFooterComponent={() => (
          <Button
            style={styles.addGoods}
            appearance="classification"
            status="danger"
            accessoryLeft={StarIcon}
            onPress={() => {
              navigation.navigate("AddNewClass");
            }}
          />
        )}
      />
    </>
  );
}

const StarIcon = props => <Icon {...props} name="plus" />;
const styles = StyleSheet.create({
  text1: {
    marginTop: 10,
    marginLeft: 57,
    maxWidth: 200,
  },
  list: {
    backgroundColor: "#fff",
  },
  separatorStyle: {
    height: 0,
  },
  right: {
    flexDirection: "row",
    alignItems: "center",
  },
  addGoods: {
    width: 33,
    margin: 15,
  },
  top: {
    marginTop: 7,
    paddingTop: 20,
    paddingBottom: 10,
    paddingHorizontal: 13,
  },
});