import React from "react";
import { StyleSheet } from "react-native";
import {
    Modal,
    Card,
    Text,
    Button,
    Layout,
    Spinner,
    Icon,
} from "@ui-kitten/components";
import { useModel, setModel } from "flooks";
import loadingModel from "../models/loadingModel";
import Textarea from "react-native-textarea";

setModel("loadingModel", loadingModel);

export default function Loading(props) {
    const { tip, confirm, cancel, getWordsStr } = useModel("wordsModel");

    const { show, title, status } = useModel("loadingModel");

    return (
        <Modal visible={show} backdropStyle={styles.backdrop}>
            {status === "loading" && (
                <Layout style={styles.loadingBox}>
                    <Spinner size='giant' status='control' />
                    <Text style={styles.text}>{getWordsStr("loading")}</Text>
                </Layout>
            )}

            {status == "success" && (
                <Layout style={styles.loadingBox}>
                    <Icon style={styles.icon} name='checkmark' fill='#fff' />
                    <Text style={styles.text}>{title}</Text>
                </Layout>
            )}

            {status == "warn" && (
                <Layout style={styles.warning}>
                    <Text style={{ color: "#fff", textAlign: "center" }}>
                        {title}
                    </Text>
                </Layout>
            )}
        </Modal>
    );
}

const styles = StyleSheet.create({
    backdrop: {
        // backgroundColor: "rgba(0, 0, 0, 0.5)",
    },
    loadingBox: {
        width: 120,
        height: 120,
        borderRadius: 10,
        backgroundColor: "rgba(0,0,0,0.8)",
        alignItems: "center",
        justifyContent: "center",
    },
    text: {
        color: "#fff",
        marginTop: 10,
    },
    icon: {
        width: 60,
        height: 60,
    },
    warning: {
        paddingHorizontal: 15,
        paddingVertical: 5,
        backgroundColor: "rgba(0,0,0,0.8)",
        borderRadius: 3,
        marginHorizontal: 20,
    },
});