//@ts-nocheck
import React, { useEffect, useState } from 'react';
import {
  Alert,
  SafeAreaView,
  ScrollView,
  TouchableOpacity,
  View,
} from 'react-native';
import { CommonActions, useNavigation } from '@react-navigation/native';
import { observer } from 'mobx-react-lite';
import { commonStyles } from '../CommonStyles';
import { IconBack, IconRead } from '../../assets/icons';
import MButton from '../../components/MButton';
import { color } from '../../theme';
import { MText } from '../../components/MText';
import { formatDDMMYYY } from '../../utils';
import notificationStore from './store';
import moment from 'moment';
import MHeader from '../../components/MHeader';

export const Notification = observer(function Notification() {
  const navigation = useNavigation();

  const getData = () => {
    notificationStore.getNotification();
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <View style={[commonStyles.fill, { backgroundColor: '#FFFFFF' }]}>
      <MHeader title="Thông báo" onBack={() => navigation.goBack()} />
      <SafeAreaView style={{ flex: 1 }}>
        <View
          style={{
            height: 1,
            backgroundColor: '#E0E0E0',
            marginHorizontal: 16,
          }}
        />

        <ScrollView style={{ flex: 1, marginTop: 8 }}>
          {notificationStore.data?.map((item, index) => (
            <View
              key={index}
              style={{ marginBottom: 8, paddingHorizontal: 16 }}
            >
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                }}
              >
                <IconRead />
                <MText
                  style={[
                    commonStyles.textNormal,
                    { fontSize: 10, marginBottom: 2, marginLeft: 3 },
                  ]}
                >
                  {moment(item.pushTime).format('HH:mm')}
                </MText>
              </View>
              <View
                style={{
                  borderWidth: 1,
                  borderColor: '#E0E0E0',
                  borderRadius: 8,
                  padding: 8,
                  backgroundColor: 'white',
                }}
              >
                <MText style={[commonStyles.textNormal]}>
                  Thông báo Đơn vay{' '}
                  <MText
                    style={[commonStyles.textNormalBold, { color: '#EF4123' }]}
                  >
                    {item.loanbriefId}
                  </MText>
                </MText>
                <MText style={[commonStyles.textNormal, { marginTop: 8 }]}>
                  {item.message}
                </MText>
                <MText style={[commonStyles.textNormal, { marginTop: 8 }]}>
                  Thời gian thay đổi:{' '}
                  <MText style={[commonStyles.textNormalBold]}>
                    {moment(item.pushTime).format('HH:mm')}{' '}
                    {formatDDMMYYY(item.pushTime)}
                  </MText>
                </MText>
              </View>
            </View>
          ))}
        </ScrollView>
      </SafeAreaView>
    </View>
  );
});
