import React from "react";
import { StyleSheet } from "react-native";
import { Modal, Text, Layout, Spinner, Icon } from "@ui-kitten/components";
import { useModel, setModel } from "flooks";

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

export default function Loading() {
  const { getWordsStr } = useModel("wordsModel");

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

  return (
    <Text>加载中...</Text>
    //   <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>
  );
}