/* eslint-disable no-underscore-dangle */
import * as React from "react";
import {
  Icon,
  Text,
  Card,
  Layout,
  ListItem,
  Button,
} from "@ui-kitten/components";
import { StyleSheet, Dimensions } from "react-native";
import { useFocusEffect } from "@react-navigation/native";
import { useModel } from "flooks";
import GoodsCard from "../components/GoodsCardVertical";
import GoodsCardLarge from "../components/GoodsCard";
import * as RootNavigation from "../navigation/RootNavigation";
import EmptyComponent from "../components/EmptyComponent";
import {
  ClassificationUtil,
  getClassificationByName,
} from "../Utils/SystemRuleUtil";

const styles = StyleSheet.create({
  tabContainer: {
    backgroundColor: "transparent",
    flex: 1,
  },
  goodsList: {
    flexDirection: "row",
    justifyContent: "space-between",
    paddingVertical: 10,
    width: Dimensions.get("window").width - 30,
    backgroundColor: "#F0F0F0",
  },
  title: {
    alignSelf: "stretch",
  },
  card: {
    alignItems: "center",
    backgroundColor: "#F0F0F0",
  },
  container: {
    backgroundColor: "#F0F0F0",
    maxWidth: 93,
    paddingBottom: 100,
    width: 93,
    flexShrink: 0,
  },
  content: {
    flexDirection: "row",
    minHeight: 200,
    flex: 1,
  },
  goodsContainer: {
    flex: 1,
    backgroundColor: "#FFFFFF",
    paddingBottom: 100,
    paddingTop: 10,
  },
  classificat: {
    backgroundColor: "#F0F0F0",
  },
  addClassificat: {
    width: 36,
    alignSelf: "center",
    marginTop: 20,
  },
  addGoods: {
    width: 40,
    height: 40,
    alignSelf: "flex-end",
    marginTop: 20,
    marginRight: 15,
  },
  add: {
    flex: 1,
    backgroundColor: "#FFF5D8",
    borderColor: "#FFF5D8",
    minHeight: 232,
    marginHorizontal: 2,
  },
  selectItem: {
    color: "#FFC21C",
    fontWeight: "bold",
  },
  hid: {
    width: 10,
    height: 10,
    position: "absolute",
    right: -10,
  },
});

const StarIcon = props => <Icon {...props} name="plus" />;

export default function HomePage1() {
  const { httpPost, httpGet } = useModel("httpModel", true);
  const [classifications, setClassifications] = React.useState([]);
  const [selectId, changeSelectId] = React.useState(0);
  const [goods, setGoods] = React.useState([]);
  const [goodsClass, setGoodsClass] = React.useState([]);
  const { showDialog } = useModel("dialogModel", true);
  const { success } = useModel("loadingModel", true);
  const { removeTips, remove, successText, NWHGKX, TEWQHV } = useModel(
    "wordsModel"
  );
  const { changeBackground } = useModel("barModel");
  const {
    classificationId,
    setClassificationId,
    getMyClassification,
    Classifications,
  } = useModel("goodsModel");

  function getGoods() {
    httpGet("/goods/my").then(res => {
      setGoods(res);
    });
  }

  useFocusEffect(
    React.useCallback(() => {
      changeBackground("#fff");
      getMyClassification().then(res => {
        if (!classificationId) {
          const _classifications = [...res];
          const { id } = _classifications.shift() || {};
          changeSelectId(id);
        } else {
          changeSelectId(classificationId);
        }
        setClassificationId(0);
      });
      getGoods();
    }, [])
  );
  React.useEffect(() => {
    setClassifications(Classifications);
  }, [Classifications]);

  const topGoods = React.useMemo(() => {
    return goods.filter(item => {
      return item.recommend;
    });
  }, [goods]);

  React.useEffect(() => {
    function getAllGoods() {
      httpGet("/classification/allGoods", {
        classificationId: selectId,
      }).then(res => {
        setGoodsClass(
          res.filter(item => {
            return item != null;
          })
        );
      });
    }
    if (selectId) {
      getAllGoods();
    }
  }, [selectId]);

  const selectClassInfo = React.useMemo(() => {
    return (
      classifications.find(item => {
        return item.id === selectId;
      }) || {}
    );
  }, [selectId, classifications]);

  const classificationList = () => {
    return classifications.map((item, index) => {
      return (
        <ListItem
          appearance="classification"
          key={index}
          title={textprops => (
            <Text
              {...textprops}
              style={[
                textprops.style,
                { textAlign: "center" },
                item.id === selectId && styles.selectItem,
              ]}
            >
              {item.name}
            </Text>
          )}
          accessoryRight={props => {
            if (!item.isOpen) {
              return (
                <Icon
                  fill="rgb(241, 90, 60)"
                  {...props}
                  style={[props.style, styles.hid]}
                  name="power"
                />
              );
            }
            return null;
          }}
          onPress={() => {
            changeSelectId(item.id);
          }}
        />
      );
    });
  };

  const classGoodsList = () => {
    return goodsClass.map((item, index) => {
      return (
        <GoodsCardLarge key={index} appearance="classification" info={item} />
      );
    });
  };

  const PulsIcon = props => (
    <Icon
      {...props}
      // eslint-disable-next-line react/destructuring-assignment
      style={[props.style, { width: 50, height: 50 }]}
      name="plus"
    />
  );

  function changeSignboard(id, signboard) {
    httpPost(
      "/goods/save",
      {
        id,
        recommend: signboard,
      },
      { body: "json" }
    ).then(() => {
      success(remove + successText);
      getGoods();
    });
  }

  const topGoodsMap = list => {
    const _list = list.map((item, index) => {
      return (
        <GoodsCard
          info={item}
          key={index}
          removeEvent={() => {
            showDialog({
              bodyText: removeTips,
              status: "danger",
              cancelable: true,
              confirmCallback: () => {
                changeSignboard(item.id, false, remove);
              },
            });
          }}
        />
      );
    });
    if (_list.length === 0) {
      _list.push(
        <Button
          style={styles.add}
          accessoryLeft={PulsIcon}
          key={1}
          onPress={() => {
            RootNavigation.navigate("AddClassification", {
              type: "recommend",
            });
          }}
        />
      );
    }
    if (_list.length === 1) {
      _list.push(
        <Button
          style={styles.add}
          accessoryLeft={PulsIcon}
          key={2}
          onPress={() => {
            RootNavigation.navigate("AddClassification", {
              type: "recommend",
            });
          }}
        />
      );
    }
    return _list;
  };

  return (
    <>
      <Layout style={styles.tabContainer}>
        <Card
          appearance="homePage1Card"
          disabled
          style={styles.card}
          backgroundColor="#F0F0F0"
          header={props => (
            <Text {...props} style={[styles.title, props.style]}>
              {NWHGKX}
            </Text>
          )}
        >
          {/* <List
                    style={styles.goodsList}
                    data={topGoods}
                    renderItem={topGoodsItem}
                /> */}
          <Layout style={styles.goodsList}>{topGoodsMap(topGoods)}</Layout>
        </Card>

        <Layout style={styles.content}>
          <Layout style={styles.container}>
            {classificationList()}
            <Button
              style={styles.addClassificat}
              appearance="classification"
              onPress={() => {
                RootNavigation.navigate("ClassificationManage");
              }}
            >
              {TEWQHV}
            </Button>
          </Layout>
          {/* <List
                        style={styles.container}
                        data={classifications}
                        renderItem={classificationItem}
                        ListFooterComponent={() => (
                         
                        )}
                    /> */}
          <Layout style={styles.goodsContainer}>
            {classGoodsList()}

            {goodsClass.length === 0 && <EmptyComponent />}

            <Button
              style={styles.addGoods}
              appearance="classification"
              status="danger"
              accessoryLeft={StarIcon}
              onPress={() => {
                const _classificationUtil = new ClassificationUtil(
                  selectClassInfo
                );
                if (
                  _classificationUtil.getType() ===
                    getClassificationByName("好评") ||
                  _classificationUtil.getType() ===
                    getClassificationByName("折扣")
                ) {
                  setClassificationId(selectId);
                  RootNavigation.navigate("SystemClassificationEdit", {
                    classifyId: selectId,
                  });
                } else {
                  setClassificationId(selectId);
                  RootNavigation.navigate("AddGoods", {
                    classifyId: selectId,
                  });
                }
              }}
            />
          </Layout>
        </Layout>
      </Layout>
    </>
  );
}
// const goodsItem = ({ item, index }) => (
//     <GoodsCardLarge key={index} appearance='classification' info={item} />
// );