import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import ListComponent from "../../components/ListComponent";
import TipNavHeader from "../../components/TipNavHeader";
import { useModel } from "flooks";
import {
    Layout,
    Input,
    Button,
    Text,
    ListItem,
    Icon,
    Toggle,
} from "@ui-kitten/components";
import { StyleSheet, View } from "react-native";
import ListUtil from "../../Utils/ListUtil";
import { ClassificationUtil } from "../../Utils/SystemRuleUtil";
import { useRoute } from "@react-navigation/native";
import GoodsCard from "../../components/GoodsCard";
const ForwardIcon = props => (
    <Icon
        {...props}
        name='arrow-ios-forward'
        fill='#B4B4B4'
        style={{ width: 15, height: 15, fontWeight: 500 }}
    />
);
//系统分类编辑
export default function SystemClassificationEditScreen({ navigation }) {
    const {
        ClassificationManage,
        ClassificationManageText6,
        getWordsStr,
    } = useModel("wordsModel");

    const {
        getUserInfo,
        startingAmount,
        preparationTime,
        updateMerchant,
    } = useModel("userModel");
    const route = useRoute();
    const { success } = 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);

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

    function getList() {
        let { classifyId, classifyTitle } = route.params || {};
        setId(classifyId || 0);
        setDel(0);
        return getInfo(classifyId)
            .then(_ => {
                return httpGet("/classification/allGoods", {
                    classificationId: classifyId,
                });
            })
            .then(res => {
                return Promise.resolve({
                    content: res || [],
                    last: true,
                });
            });
    }

    function getInfo(classifyId) {
        return httpGet("/classification/get/" + classifyId, {}, true).then(
            res => {
                setTitle(res.name || "");
                let classify = new ClassificationUtil(res);
                setClass(classify);
                setTipList(classify.getMenuTipsList());
                changeIsOpen(res.isOpen);
            }
        );
    }

    const goodsItem = ({ item, index }) => (
        <GoodsCard
            appearance='classification'
            key={index}
            info={item}
            removeEvent={() => remove(id, item.id)}
        />
    );

    function remove(classId, goodsId) {
        removeClassGoods(classId, goodsId, res => {
            setDel(goodsId);
        });
    }

    function TipsTexts() {
        let _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 ? "开启" : "关闭"}
            </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={true}
                delId={delId}
                style={styles.list}
                extraData={{ id: id }}
                ListFooterComponent={() => (
                    <Button
                        style={styles.addGoods}
                        appearance='classification'
                        status='danger'
                        accessoryLeft={StarIcon}
                        onPress={() => {
                            navigation.navigate("AddClassification", {
                                type: "classification",
                                classificationId: id,
                            });
                        }}
                    />
                )}
            />
        </>
    );
}

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