import * as React from "react";
import { Layout, Button } from "@ui-kitten/components";
import { StyleSheet } from "react-native";
import { useModel } from "flooks";
import CommentCard from "../components/Comment";
import Badge from "../components/Badge";
import * as RootNavigation from "../navigation/RootNavigation";

const styles = StyleSheet.create({
  tabContainer: {
    backgroundColor: "#fff",
    paddingTop: 20,
    paddingBottom: 80,
    flex: 1,
  },
  bageList: {
    flexDirection: "row",
    flexWrap: "wrap",
    paddingHorizontal: 15,
    paddingBottom: 9,
  },
  back: {
    paddingHorizontal: 13,
    paddingVertical: 5,
    flexDirection: "row",
    justifyContent: "flex-end",
  },
  backText: {
    width: 200,
    borderRadius: 3,
    backgroundColor: "#EEEEEE",
    height: 23,
    lineHeight: 23,
    paddingLeft: 5,
  },
  backButtn: {
    marginLeft: 10,
  },
  container: {},
});

export default function HomePage2() {
  // eslint-disable-next-line no-unused-vars
  const [commentList, setCommentList] = React.useState([{}, {}, {}]);

  const { editAutoBack, TCSOVO, BWEOYE, POKFOW } = useModel("wordsModel");

  const allCommentList = () => {
    return commentList.map((item, index) => {
      return <CommentCard key={index} />;
    });
  };

  return (
    <Layout style={styles.tabContainer}>
      <Layout style={styles.bageList}>
        <Badge appearance="filled" status="warning" right={5} bottom={4}>
          {TCSOVO}
        </Badge>
        <Badge appearance="filled" right={5} bottom={4}>
          {BWEOYE}
        </Badge>
        <Badge appearance="filled" right={5} bottom={4}>
          {POKFOW}
        </Badge>
        <Badge appearance="filled" status="info" right={5} bottom={4}>
          差评
        </Badge>
      </Layout>
      <Layout style={styles.back}>
        <Button
          style={styles.backButtn}
          onPress={() => {
            RootNavigation.navigate("Automatic");
          }}
        >
          {editAutoBack}
        </Button>
      </Layout>

      <Layout style={styles.container}>{allCommentList()}</Layout>
    </Layout>
  );
}