import { StackScreenProps } from "@react-navigation/stack";
import * as React from "react";
import { RefreshControl } from "react-native";
import { Div, Button, Image, Text, Avatar } from "react-native-magnus";
import { ScrollView } from "react-native-gesture-handler";

import { useModel } from "flooks";
import { RootStackParamList } from "../types";
import { getChatTime } from "../Utils/TimeUtils";
import request from "../utils/RequestUtils";

export default function RegisterScreen({ navigation, route }) {
  const { params } = route;
  const { emailId } = params;

  const { httpGet,httpPost } = useModel("httpModel");
  const { data, loading, reload, run } = useRequest(
    () => {
      return httpGet(`/email/get/${emailId}`);
    },
    {
      refreshDeps: [emailId],
      initialData: {},
      onSuccess: res => {
        if (!res.isRead) {
         httpPost(
           "/email/save",
           {
             ...data,
             isRead: true,
           },
           { body: "json" }
         );
        }
      },
    }
  );

  return (
    <Div bg="gray100">
      <ScrollView
        contentContainerStyle={{ flexGrow: 1, backgroundColor: "#f2f2f2" }}
        refreshControl={
          <RefreshControl refreshing={loading} onRefresh={reload} />
        }
      >
        <Div my={10} px={15} py={5} bg="white">
          <Div row justifyContent="space-between" py={10}>
            <Text fontSize="xl" fontWeight="bold">
              {data.title}
            </Text>
            <Text>{getChatTime(data.sendTime)}</Text>
          </Div>

          <Text
            py={10}
            color="gray600"
            borderTopColor="gray100"
            borderTopWidth={1}
            fontSize="sm"
          >
            {data.content}
          </Text>
        </Div>
      </ScrollView>
    </Div>
  );
}