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

const Header = (props, title) => (
  <Text {...props} category="s1">
    {title}
  </Text>
);

const styles = StyleSheet.create({
  flex1: {
    backgroundColor: "rgba(0,0,0,0)",
    paddingHorizontal: 15,
    paddingBottom: 20,
  },
  list: {
    backgroundColor: "rgba(0,0,0,0)",
  },
  container: {
    backgroundColor: "#EEEEEE",
    paddingTop: 20,
  },
  tabContent: {
    backgroundColor: "#fff",
    marginTop: 20,
  },
  img: {
    width: 100,
    height: 100,
    alignSelf: "center",
  },
  img2: {
    width: 97,
    height: 21,
    alignSelf: "center",
    marginTop: 2,
  },
  text: {
    marginTop: 16,
  },
  layoutLeft: {
    // flexDirection: "row",
    paddingVertical: 10,
    justifyContent: "center",
    alignItems: "center",
  },
  form: {
    paddingHorizontal: 26,
    paddingVertical: 20,
  },
  textareaContainer: {
    backgroundColor: "#F0F0F0",
    height: 100,
    borderRadius: 4,
  },
  textarea: {
    textAlignVertical: "top", // hack android
    fontSize: 13,
    color: "#333",
    paddingHorizontal: 14,
    paddingVertical: 10,
    height: 100,
  },
});

export default function AddGoodsClassification({}) {
  const theme = useTheme();
  const { changeBackground } = useModel("barModel");
  const { httpGet, httpPost } = useModel("httpModel", true);
  const { success } = useModel("loadingModel", true);

  const {
    goodsClassificationTitle1,
    goodsClassificationTitle2,
    goodsClassificationTitle3,
    add,
    remove,
    successText,
    removeTips,
    addClassTips,
  } = useModel("wordsModel");
  const { showDialog } = useModel("dialogModel", true);
  const { selectInfos, changeSelect } = useModel("goodsModel");
  const [goods, changeGoods] = React.useState([]);
  const [selectId, changeSelectId] = React.useState(0);
  const [goodsClass, setGoodsClass] = React.useState([]);
  const [pageType, changeType] = React.useState();

  const topGoods = React.useMemo(() => {
    if (pageType === "signboard") {
      return goods.filter(item => {
        return item.signboard;
      });
    }

    if (pageType === "recommend") {
      return goods.filter(item => {
        return item.recommend;
      });
    }

    return [...goodsClass];
  }, [goods, goodsClass]);

  const elseGoods = React.useMemo(() => {
    if (pageType === "signboard") {
      return goods.filter(item => {
        return !item.signboard;
      });
    }

    if (pageType === "recommend") {
      return goods.filter(item => {
        return !item.recommend;
      });
    }
    const _topIds = topGoods.map(item => {
      return item.id;
    });
    return goods.filter(item => {
      return _topIds.indexOf(item.id) === -1;
    });
  }, [goods, goodsClass]);

  function getSelectGoods() {
    httpGet("/classification/allGoods", {
      classificationId: selectId,
    }).then(res => {
      let list = res || [];
      list = list.filter(item => {
        return item != null;
      });
      setGoodsClass(list);
    });
  }

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

  function changeSignboard(id, signboard, tips, info) {
    if (pageType === "signboard" || pageType === "recommend") {
      httpPost(
        "/goods/save",
        {
          id,
          [pageType]: signboard,
        },
        { body: "json" }
      ).then(res => {
        success(tips + successText);
        const _goods = goods.map(item => {
          if (item.id !== id) {
            return item;
          }
          return res;
        });
        changeGoods(_goods);
      });
    } else if (pageType === "classification" && selectId === "new") {
      const _goodsClass = [...goodsClass];
      if (signboard) {
        _goodsClass.push(info);
      } else {
        _goodsClass.splice(
          _goodsClass.findIndex(item => {
            return item.id === id;
          }),
          1
        );
      }
      success(tips + successText);
      setGoodsClass(_goodsClass);
      changeSelect(_goodsClass);
    } else if (signboard) {
      const ids = topGoods.map(item => {
        return item.id;
      });
      ids.push(id);
      httpGet(
        "/classification/saveGoods",
        {
          classificationId: selectId,
          string: ids.join(","),
        },
        { body: "json" }
      ).then(() => {
        success(tips + successText);
        getSelectGoods();
      });
    } else {
      httpGet(
        "/classification/delGoods",
        {
          classificationId: selectId,
          goodId: id,
        },
        { body: "json" }
      ).then(() => {
        success(tips + successText);
        getSelectGoods();
      });
    }
  }

  const route = useRoute();
  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme["color-primary-500"]);
      const { params } = route;
      const { type, classificationId } = params;
      if (type === "classification") {
        changeSelectId(classificationId);
      }
      if (type) {
        changeType(type);
      } else {
        changeType("signboard");
      }

      getAllGoods();
    }, [])
  );

  React.useEffect(() => {
    if (selectId && selectId !== "new") {
      getSelectGoods();
    } else if (selectId === "new") {
      setGoodsClass(selectInfos);
    }
  }, [selectId]);

  const chooseGoodsItem = ({ item }) => (
    <GoodsCard
      info={item}
      key={item.id}
      isAdd
      removeEvent={() => {
        showDialog({
          bodyText: removeTips,
          status: "danger",
          cancelable: true,
          confirmCallback: () => {
            changeSignboard(item.id, false, remove, item);
          },
        });
      }}
    />
  );
  const goodsItem = ({ item }) => (
    <GoodsCard
      info={item}
      key={item.id}
      isAdd={false}
      addEvent={() => {
        if (topGoods.length < 2 || pageType !== "recommend") {
          changeSignboard(item.id, true, add, item);
        } else {
          showDialog({
            bodyText: addClassTips,
          });
        }
      }}
    />
  );

  return (
    <>
      <NavHeaderBar title={goodsClassificationTitle1} />
      <ScrollPage>
        <Layout style={styles.container}>
          <Card
            appearance="headerList"
            header={props => {
              return Header(props, goodsClassificationTitle2);
            }}
            disabled
          >
            <List
              data={topGoods}
              style={styles.list}
              renderItem={chooseGoodsItem}
              ListEmptyComponent={EmptyComponent}
            />
          </Card>

          <Card
            appearance="headerList"
            header={props => {
              return Header(props, goodsClassificationTitle3);
            }}
            disabled
          >
            <List
              data={elseGoods}
              style={styles.list}
              renderItem={goodsItem}
              ListEmptyComponent={EmptyComponent}
            />
          </Card>
        </Layout>
        {/* <ActionButton
                    style={{ zIndex: 2 }}
                    buttonColor={theme["color-primary-500"]}
                    onPress={() => {
                        let ids = topGoods.map((item) => {
                            return item.id;
                        });
                        ids = ids.join(",");
                        console.log(ids);
                        navigation.navigate(route.params.preKey, {
                            choosIds: ids,
                        });
                    }}
                    position='center'
                /> */}
      </ScrollPage>
    </>
  );
}