import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import {
    Image,
    Platform,
    StyleSheet,
    TouchableOpacity,
    View,
    ImageBackground,
} from "react-native";
import scrollPage from "../decorator/scrollPage";
import { useModel } from "flooks";
import {
    Layout,
    Tab,
    TabView,
    Text,
    useTheme,
    Button,
    Card,
    List,
} from "@ui-kitten/components";
import FormInput from "../components/FormInput";
import { useFocusEffect } from "@react-navigation/native";
import ScrollPage from "../components/ScrollPage";
import NavHeaderBar from "../components/NavHeaderBar";
import GoodsCard from "../components/GoodsCard";
import EmptyComponent from "../components/EmptyComponent";
import ActionButton from "react-native-action-button";
import TabBarIcon from "../components/TabBarIcon";

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

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

    const {
        goodsClassificationTitle1,
        goodsClassificationTitle2,
        goodsClassificationTitle3,
        add,
        remove,
        successText,
        removeTips,
        addClassTips,
    } = useModel("wordsModel");
    const { showDialog } = useModel("dialogModel", true);
    const [categoryList, changeCategoryList] = React.useState([]);
    const [merchantNatureList, changeMerchantNatureList] = React.useState([]);
    const [goods, changeGoods] = React.useState([]);
    const [selectId, changeSelectId] = React.useState(0);
    const [goodsClass, setGoodsClass] = React.useState([]);
    const [pageType, changeType] = React.useState("signboard");
    useFocusEffect(
        React.useCallback(() => {
            changeBackground(theme["color-primary-500"]);
            console.log(route);
            if (route.params.type == "classification") {
                changeSelectId(route.params.classificationId);
            }
            if (route.params.type) {
                changeType(route.params.type);
            } else {
                changeType("signboard");
            }

            getAllGoods();
        }, [])
    );

    React.useEffect(() => {
        if (selectId && selectId != "new") {
            getSelectGoods();
        }
    }, [selectId]);
    function getSelectGoods() {
        httpGet("/classification/allGoods", {
            classificationId: selectId,
        }).then((res) => {
            setGoodsClass(res);
        });
    }
    function getAllGoods() {
        httpGet("/goods/my").then((res) => {
            changeGoods(res);
        });
    }

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

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

    const [name, changeName] = React.useState("");
    const [sort, changeSort] = React.useState("");
    const [goodsIds, changeGoodsIds] = React.useState("");

    const canNext = React.useMemo(() => {
        return true;
    }, [name]);

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

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

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

                    <Card
                        appearance='headerList'
                        header={(props) => {
                            return Header(props, goodsClassificationTitle3);
                        }}
                        disabled={true}
                    >
                        <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>
        </>
    );
}

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,
    },
});