import { Button, List, ListItem, ListSubheader, Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";
import moment from "moment";
import { pond } from "protobuf-ts/pond";
import { useGlobalState, useNotificationAPI } from "providers";
import React, { useEffect, useRef, useState } from "react";
import { getThemeType } from "theme/themeType";

interface Props {
  objectKey: string
  objectType: pond.ObjectType
}

const useStyles = makeStyles(() => {
  return ({
    dark: {
      backgroundColor: getThemeType() === "light" ? "rgb(245, 245, 245)" : "rgb(50, 50, 50)",
      padding: 5
    },
    light: {
      backgroundColor: getThemeType() === "light" ? "rgb(235, 235, 235)" : "rgb(60, 60, 60)",
      padding: 5
    },
  })
})

export default function Notifications(props: Props){
  const {objectKey, objectType} = props
  const classes = useStyles();
  const [recentNotifications, setRecentNotifications] = useState<pond.Notification[]>([]);
  const [notificationsLoading, setNotificationsLoading] = useState(false)
  const loadingRef = useRef(false)
  const [{as}] = useGlobalState();
  const notificationAPI = useNotificationAPI();
  const [totalNotifications, setTotalNotifications] = useState(0)
  

  //get the notifications for the components on an object
  useEffect(() => {
    if (loadingRef.current) return
    loadingRef.current = true
    notificationAPI
      .listObjectNotifications(objectKey, objectType, 10, 0, undefined, undefined, undefined, as)
      .then(resp => {
        setRecentNotifications(resp.data.notifications);
        setTotalNotifications(resp.data.total);
      })
      .catch(_err => {})
      .finally(() => {
        loadingRef.current = true;
      });
  }, [objectKey, objectType, notificationAPI]);

  const loadMoreNotifications = () => {
    let current = recentNotifications;
    setNotificationsLoading(true);
    notificationAPI
    .listObjectNotifications(
      objectKey,
      objectType,
      10,
      current.length,
      undefined,
      undefined,
      undefined,
      as
    )
    .then(resp => {
      if (resp.data.notifications.length > 0) {
        let c = current.concat(resp.data.notifications);
        setRecentNotifications([...c]);
      }
    })
    .catch(_err => {})
    .finally(() => {
      setNotificationsLoading(false);
    });
  };

  return (
    <List style={{ margin: 5 }}>
      <ListSubheader>
        <Typography sx={{paddingY: 2}}>
          Notifications
        </Typography>
      </ListSubheader>
      {recentNotifications && (
        <React.Fragment>
          {recentNotifications.map((notification, i) => (
            <ListItem key={i} className={i % 2 === 0 ? classes.dark : classes.light}>
              <Typography style={{ fontWeight: 650 }}>
                {moment(notification.status?.timestamp).format("MMMM DD, YYYY - h:mm a")}
              </Typography>{" "}
              :{" "}
              <Typography>
                {notification.settings?.title + " - " + notification.settings?.subtitle}
              </Typography>
            </ListItem>
          ))}
          {recentNotifications.length < totalNotifications && (
            <ListItem key={"button"}>
              <Button onClick={loadMoreNotifications} disabled={notificationsLoading}>
                Get More
              </Button>
            </ListItem>
          )}
        </React.Fragment>
      )}
    </List>
  );
}