import { FC, useCallback, useEffect, useState } from 'react';
import { useReactiveVar } from '@apollo/client';
import { UnderLay, Visible, Container } from 'components';
import { isNotificationOpenVar } from 'state-management/dialogs';
import {
  useMultipleNotificationsQuery,
  NotificationFragment,
  useNotificationChangedSubscription,
} from 'expo-schema';
import { metrics } from 'config';
import { List } from 'components/notification';

const { STYLES, LIMITS } = metrics;

export const Notifications: FC = () => {
  const isNotificationOpen = useReactiveVar(isNotificationOpenVar);
  const [notifications, setNotifications] = useState<NotificationFragment[]>([]);
  const { data } = useMultipleNotificationsQuery({
    variables: {
      limit: LIMITS.notifications,
      offset: 0,
    },
  });

  const isNotificationExist = useCallback(
    (notificationId: string) => {
      const notificationResponse = notifications.find(
        (notification) => notification.id === notificationId
      );
      return notificationResponse;
    },
    [notifications]
  );

  const updateNotification = useCallback(
    (notification: NotificationFragment) => {
      const index = notifications.findIndex((msg) => msg.id === notification.id);
      const updatedNotifications = [...notifications];
      updatedNotifications.splice(index, 1, notification);
      setNotifications(updatedNotifications);
    },
    [notifications]
  );
  const addNotification = useCallback(
    (notification: NotificationFragment) => {
      setNotifications([...notifications, notification]);
    },
    [notifications]
  );

  const handleSubscription = useCallback(
    (notification: NotificationFragment) => {
      if (notification) {
        if (isNotificationExist(notification.id)) {
          updateNotification(notification);
        } else {
          addNotification(notification);
        }
      }
    },
    [addNotification, isNotificationExist, updateNotification]
  );

  useNotificationChangedSubscription({
    onSubscriptionData: (sub) => {
      handleSubscription(sub.subscriptionData.data?.notificationChanged as NotificationFragment);
    },
  });
  useEffect(() => {
    if (data?.MultipleNotifications) {
      setNotifications(data?.MultipleNotifications as NotificationFragment[]);
    }
    return () => {};
  }, [data?.MultipleNotifications]);

  const closeDialog = useCallback(() => {
    isNotificationOpenVar(false);
  }, []);
  const left = STYLES.sideBarCollapseWidth;

  return (
    <Visible if={isNotificationOpen}>
      <UnderLay
        alignItems="center"
        justifyContent="center"
        isActive={isNotificationOpen}
        setIsActive={closeDialog}
        isTransparent={true}
      >
        <Container
          width={STYLES.sideBarWidth}
          position="absolute"
          left={left}
          bottom={0}
          top={STYLES.topBarHeight}
        >
          <List variant="float" notifications={notifications as NotificationFragment[]} />
        </Container>
      </UnderLay>
    </Visible>
  );
};