import React from "react";
import { TopviewGetInstance, Icon, Tip } from "beeshell";
import { View, Text, ActivityIndicator, StyleSheet } from "react-native";
//加载页
export default {
    state: {
        status: "",
        title: "",
        show: false,
        loadingId: 0,
        successId: 0,
    },
    actions: ({ model, setState }) => ({
        loading() {
            console.log("loading");
            const { clear } = model();
            clear();
            TopviewGetInstance()
                .add(<LoadingComent />)
                .then((id) => {
                    setState({
                        status: "loading",
                        show: true,
                        loadingId: id,
                    });
                });
        },
        success(title) {
            const { clear } = model();
            clear();
            TopviewGetInstance()
                .add(<SuccessComent title={title} />)
                .then((id) => {
                    setState({
                        status: "success",
                        title: title,
                        show: true,
                        successId: id,
                    });
                    setTimeout(() =>  clear(), 1500);
                });
        },
        warnning(title) {
            const { clear } = model();
            clear();
            setState({
                status: "warn",
                title: title,
                show: true,
            });
            Tip.show(title || "", 1500, false);
            setTimeout(() => clear(), 1500);
        },
        clear() {
            const { show, status, loadingId, successId } = model();
            if (show) {
                if (status === "loading") {
                    TopviewGetInstance().remove(loadingId);
                } else if (status === "success") {
                    TopviewGetInstance().remove(successId);
                }
                setState({
                    show: false,
                });
            }
        },
    }),
};

const LoadingComent = () => (
    <View style={styles.box}>
        <View style={styles.loadingBox}>
            <ActivityIndicator size='large' color='#fff' />
            <Text style={styles.text}>加载中</Text>
        </View>
    </View>
);
const SuccessComent = (props) => (
    <View style={styles.box}>
        <View style={styles.loadingBox}>
            <Icon
                source={require("beeshell/dist/common/images/icons/check.png")}
                size={60}
                tintColor='#fff'
            />
            <Text style={styles.text}>{props.title || "成功"}</Text>
        </View>
    </View>
);

const styles = StyleSheet.create({
    box: {
        position: "absolute",
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        backgroundColor: "rgba(255,255,255,0)",
        alignItems: "center",
        justifyContent: "center",
    },
    loadingBox: {
        width: 120,
        height: 120,
        borderRadius: 10,
        backgroundColor: "rgba(0,0,0,0.8)",
        alignItems: "center",
        justifyContent: "center",
    },
    text: {
        color: "#fff",
        marginTop: 5,
    },
});