/* eslint-disable no-underscore-dangle */
import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { useModel } from "flooks";
import { Layout, Button, Text, Icon, Toggle } from "@ui-kitten/components";
import { StyleSheet } from "react-native";
import { useRoute } from "@react-navigation/native";
import ListComponent from "../../components/ListComponent";
import TipNavHeader from "../../components/TipNavHeader";
import {
  ClassificationUtil,
  getClassificationByName,
} from "../../Utils/SystemRuleUtil";
import GoodsCard from "../../components/GoodsCard";

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,
  },
  toggle: {
    alignSelf: "flex-start",
    marginTop: 10,
  },
  top: {
    backgroundColor: "rgb(238, 238, 238)",
    paddingHorizontal: 13,
    paddingVertical: 10,
    marginTop: 10,
  },
});

// 系统分类编辑
export default function SystemClassificationEditScreen({ navigation }) {
  const { ClassificationManageText6, getWordsStr, QTLJZW, AKHVEE } = useModel(
    "wordsModel"
  );

  // const {} = useModel("userModel");
  const route = useRoute();
  // const {  } = useModel("loadingModel");
  const { httpGet } = useModel("httpModel");
  const { clossClassTip, saveInfo, removeClassGoods } = useModel(
    "goodsModel",
    true
  );

  const [id, setId] = React.useState();
  const [title, setTitle] = React.useState();
  const [tips, setTipList] = React.useState([]);
  const [classifyInfo, setClass] = React.useState(new ClassificationUtil());
  const [delId, setDel] = React.useState(0);
  const [isOpen, changeIsOpen] = React.useState(false);

  function getInfo(classifyId) {
    return httpGet(`/classification/get/${classifyId}`, {}, true).then(res => {
      setTitle(res.name || "");
      const classify = new ClassificationUtil(res);
      setClass(classify);
      setTipList(classify.getMenuTipsList());
      changeIsOpen(res.isOpen);
    });
  }
  function getList() {
    const { classifyId } = route.params || {};
    setId(classifyId || 0);
    setDel(0);
    return getInfo(classifyId)
      .then(() => {
        return httpGet("/classification/allGoods", {
          classificationId: classifyId,
        });
      })
      .then(res => {
        let list = res || [];
        list = list.filter(item => {
          return item != null;
        });
        return Promise.resolve({
          content: list,
          last: true,
        });
      });
  }

  const checkEvent = isChecked => {
    changeIsOpen(isChecked);
    if (!isChecked) {
      clossClassTip(() => {
        saveInfo({
          ...classifyInfo.allInfo,
          isOpen: isChecked,
        }).then(() => {
          getInfo(classifyInfo.id);
        });
      });
    } else {
      saveInfo({
        ...classifyInfo.allInfo,
        isOpen: isChecked,
      }).then(() => {
        getInfo(classifyInfo.id);
      });
    }
  };

  function remove(classId, goodsId) {
    removeClassGoods(classId, goodsId, () => {
      setDel(goodsId);
    });
  }
  const goodsItem = ({ item, index }) => (
    <GoodsCard
      appearance="classification"
      key={index}
      info={item}
      removeEvent={() => remove(id, item.id)}
    />
  );

  function TipsTexts() {
    const _tips =
      [...tips].map((item, index) => {
        return <Text key={index}>{getWordsStr(item)}</Text>;
      }) || [];

    _tips.push(
      <Toggle
        key="Toggle"
        checked={isOpen}
        onChange={checkEvent}
        style={styles.toggle}
      >
        {isOpen ? QTLJZW : AKHVEE}
      </Toggle>
    );

    return _tips;
  }

  return (
    <>
      <TipNavHeader title={title}>{TipsTexts()}</TipNavHeader>

      <Layout style={styles.top}>
        <Text category="h6">{ClassificationManageText6}</Text>
      </Layout>
      <ListComponent
        getInfo={getList}
        renderItem={goodsItem}
        separatorStyle={styles.separatorStyle}
        showEmpty
        delId={delId}
        style={styles.list}
        extraData={{ id }}
        ListFooterComponent={() => {
          if (
            classifyInfo.getType() !== getClassificationByName("好评") &&
            classifyInfo.getType() !== getClassificationByName("折扣")
          ) {
            return (
              <Button
                style={styles.addGoods}
                appearance="classification"
                status="danger"
                accessoryLeft={StarIcon}
                onPress={() => {
                  navigation.navigate("AddClassification", {
                    type: "classification",
                    classificationId: id,
                  });
                }}
              />
            );
          }
          return <></>;
        }}
      />
    </>
  );
}