import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { MyNotificationsProps } from '../../../model/components/profile';
import Notifications from '../../icons/Notifications';
// import CheckBig from '../../icons/CheckBig';
import { Notification } from '../../../model/user';
// import CloseSmall from '../../icons/CloseSmall';
// import IconButton from '../../common/IconButton';

const MyNotifications: React.FC<MyNotificationsProps> = ({
  notifications: userNotifications,
  // team,
}) => {
  const { t } = useTranslation();
  // const [notifications, setNotifications] =
  const [notifications] = useState<Notification[]>(userNotifications);

  // const acceptUser: (dateIndex: number, infoIndex: number) => void = (
  //   dateIndex,
  //   infoIndex,
  // ) => {
  //   const updatedNotifications = notifications;
  //   updatedNotifications[dateIndex].notificationsInfo[infoIndex].accepted =
  //     true;
  //   setNotifications(updatedNotifications);
  // };

  return (
    <div className="myNotifications">
      <div className="title">
        <Notifications size="medium" />
        <h2>{t('NOTIFICATIONS')}</h2>
      </div>
      {notifications?.length ? (
        <ul className="notifications">
          {/* {notifications.map((currentDate, dateIndex) => ( */}
          {notifications.map((currentDate) => (
            <div key={`${currentDate.date}`}>
              <li className="dayItem">
                <p>{currentDate.date}</p>
              </li>
              {/* {currentDate.notificationsInfo.map((currentInfo, infoIndex) => ( */}
              {currentDate.notificationsInfo.map((currentInfo) => (
                <li
                  className={`notificationItem${
                    currentInfo.newUser ? ' invitation' : ''
                  }`}
                  key={`${currentDate.date}-${currentInfo.text}`}
                >
                  <div className="infoWrapper">
                    {/* {currentInfo.requestedTeam?.id === team.id && (
                      <button
                        type="button"
                        className="acceptButton"
                        onClick={(): void => acceptUser(dateIndex, infoIndex)}
                      >
                        <span
                          className={currentInfo.accepted ? 'accepted' : ''}
                        >
                          <CheckBig size="medium" />
                        </span>
                        <p>
                          {currentInfo.accepted ? t('ACCEPTED') : t('ACCEPT')}
                        </p>
                      </button>
                    )} */}
                    <p>
                      {t(currentInfo.text, {
                        userName: currentInfo.newUser?.username,
                      })}
                    </p>
                    {/* <IconButton title="Eliminar" size="tiny">
                        <CloseSmall />
                      </IconButton> */}
                  </div>
                </li>
              ))}
            </div>
          ))}
        </ul>
      ) : (
        <p title="No notifications">{t('NO_NOTIFICATIONS')}</p>
      )}
    </div>
  );
};

export default MyNotifications;