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 { useRequest } from 'ahooks';

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 { data, loading, reload, run } = useRequest(`/email/get/${emailId}`, {
    refreshDeps: [emailId],
    initialData: {},
    onSuccess: (res) => {
      if (!res.isRead) {
        request.post('/email/save', {
          data: {
            ...data,
            isRead: true,
          },
        });
      }
    },
  });

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