import type { FC } from 'react';
import React from 'react';

import type { HasObjectId } from '@growi/core';
import { LoadingSpinner } from '@growi/ui/dist/components';

import type { IInAppNotification, PaginateResult } from '~/interfaces/in-app-notification';


import InAppNotificationElm from './InAppNotificationElm';


type Props = {
  inAppNotificationData?: PaginateResult<IInAppNotification>,
  onUnopenedNotificationOpend?: () => void,
};

const InAppNotificationList: FC<Props> = (props: Props) => {
  const { inAppNotificationData, onUnopenedNotificationOpend } = props;

  if (inAppNotificationData == null) {
    return (
      <div className="wiki">
        <div className="text-muted text-center">
          <LoadingSpinner className="me-1 fs-3" />
        </div>
      </div>
    );
  }

  const notifications = inAppNotificationData.docs;

  return (
    <div className="list-group">
      { notifications.map((notification: IInAppNotification & HasObjectId) => {
        return (
          <InAppNotificationElm
            key={notification._id}
            notification={notification}
            onUnopenedNotificationOpend={onUnopenedNotificationOpend}
          />
        );
      }) }
    </div>
  );
};


export default InAppNotificationList;