import React, { useState } from 'react';
import { View, Text, FlatList, TouchableOpacity } from 'react-native';

import { Header, PageWrapper } from 'src/components';
import Modal from 'react-native-modal';
import { RectButton, Swipeable } from 'react-native-gesture-handler';
import { styles } from './styles';
import { Colors } from 'src/theme';

import PeopleIcon from 'assets/icons/notifications/people-group-solid.svg';
import ChatIcon from 'assets/icons/notifications/messages.svg';
import GearIcon from 'assets/icons/notifications/gear-solid.svg';
import TrashIcon from 'assets/icons/travels-screens/trash-solid.svg';

const NotificationsListScreen = ({ navigation }: { navigation: any }) => {
  const [notifications, setNotifications] = useState<Notification[]>([
    {
      id: '1',
      title: 'New friend request',
      description:
        'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the indimply dummy text of the printing and typesetting industry',
      date: 'Today, 09.09.2024',
      icon: <PeopleIcon fill={Colors.WHITE} width={16} height={16} />,
      modalContent: 'Hello! You have received a new friend request. Please take a look',
      isRead: false,
      largeIcon: <PeopleIcon fill={Colors.ORANGE} width={52} height={52} />
    },
    {
      id: '2',
      title: 'You have 3 messages',
      description: 'Lorem Ipsum is simply dummy text of the',
      date: 'Today, 09.09.2024',
      icon: <ChatIcon fill={Colors.WHITE} width={16} height={16} />,
      modalContent: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
      isRead: false,
      largeIcon: <ChatIcon fill={Colors.ORANGE} width={52} height={52} />
    },
    {
      id: '3',
      title: 'A new poll',
      description:
        'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the indimply dummy text of the printing and typesetting industry',
      date: 'Yesterday, 08.09.2024',
      icon: <GearIcon fill={Colors.DARK_BLUE} width={16} height={16} />,
      modalContent: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
      isRead: true,
      largeIcon: <GearIcon fill={Colors.ORANGE} width={52} height={52} />
    }
  ]);

  const [selectedNotification, setSelectedNotification] = useState<Notification | null>(null);
  const [isModalVisible, setModalVisible] = useState(false);

  const openModal = (notification: Notification) => {
    setSelectedNotification(notification);
    setModalVisible(true);
    !notification.isRead && markAsRead(notification.id);
  };

  const closeModal = () => {
    setModalVisible(false);
    setSelectedNotification(null);
  };

  const markAsRead = (id: string) => {
    setNotifications((prevNotifications) =>
      prevNotifications.map((n) => (n.id === id ? { ...n, isRead: true } : n))
    );
  };

  const deleteNotification = (id: string) => {
    setNotifications((prevNotifications) => prevNotifications.filter((n) => n.id !== id));
  };

  const renderRightActions = (id: string) => (
    <RectButton style={styles.deleteButton} onPress={() => deleteNotification(id)}>
      <TrashIcon fill={Colors.RED} width={18} height={18} />
      <Text style={styles.deleteButtonText}>Delete</Text>
    </RectButton>
  );

  const renderNotificationItem = ({ item }: { item: Notification }) => (
    <Swipeable renderRightActions={() => renderRightActions(item.id)}>
      <TouchableOpacity
        style={[
          styles.notificationItem,
          item.isRead ? styles.notificationRead : styles.notificationUnread
        ]}
        onPress={() => openModal(item)}
      >
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          <Text
            style={[
              styles.notificationTitle,
              item.isRead ? { color: Colors.DARK_BLUE } : { color: Colors.WHITE }
            ]}
          >
            {item.title}
          </Text>
          <View style={[styles.notificationIcon, item.isRead ? {} : {}]}>{item.icon}</View>
        </View>

        <Text
          style={[
            styles.notificationDescription,
            item.isRead ? { color: Colors.DARK_BLUE } : { color: Colors.WHITE }
          ]}
          numberOfLines={2}
        >
          {item.description}
        </Text>
        <Text
          style={[
            styles.notificationDate,
            item.isRead ? { color: Colors.DARK_BLUE } : { color: Colors.WHITE }
          ]}
        >
          {item.date}
        </Text>
      </TouchableOpacity>
    </Swipeable>
  );

  return (
    <PageWrapper>
      <Header label="Notifications list" />
      <FlatList
        data={notifications}
        renderItem={renderNotificationItem}
        keyExtractor={(item) => item.id}
        contentContainerStyle={styles.notificationList}
      />

      {selectedNotification && (
        <Modal
          isVisible={isModalVisible}
          onBackdropPress={closeModal}
          onBackButtonPress={closeModal}
          style={styles.modalWrapper}
        >
          <View style={styles.modalContainer}>
            <View style={styles.modalIcon}>{selectedNotification.largeIcon}</View>
            <View style={{ width: '100%', gap: 12, marginBottom: 52 }}>
              <Text style={styles.modalTitle}>{selectedNotification.title}</Text>
              <Text style={styles.modalDescription}>{selectedNotification.modalContent}</Text>
              <Text style={styles.modalDate}>{selectedNotification.date}</Text>
            </View>

            <TouchableOpacity style={styles.modalButton} onPress={closeModal}>
              <Text style={styles.modalButtonText}>OK</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.modalActionButton}>
              <Text style={styles.modalActionButtonText}>
                {selectedNotification.title.includes('friend')
                  ? 'Go to friends'
                  : selectedNotification.title.includes('messages')
                    ? 'Go to messages'
                    : 'Go to polls'}
              </Text>
            </TouchableOpacity>
          </View>
        </Modal>
      )}
    </PageWrapper>
  );
};

export default NotificationsListScreen;
