// Antd
import { Pagination } from 'antd';

// Hooks
import { observer } from 'mobx-react-lite';
import { useStore } from 'stores/StoreProvider';

// Stores
import { FC } from 'react';
import { RootStore } from 'stores/RootStore';

// Apps
import { NCIRCCNotification } from '../NCIRCCNotification';
import classNames from 'classnames';

// Styles
import styles from './NotificationList.module.scss';

export const NCIRCCNotificationsList: FC = observer(() => {
  const rootStore: RootStore = useStore();
  const helpersStore = rootStore.helpersStore;
  const ncirccUiStore = rootStore.ncirccUiStore;

  const widthNotificationIsVisibleMessenger = !ncirccUiStore.messageCardSize
    ? { width: '100%' }
    : { width: '69.5%' };

  return (
    <div>
      <div
        className={classNames(styles['notification-list'], {
          [styles['notification-list--collapsed']]: helpersStore.collapse,
          [styles['notification-list--not-collapsed']]: !helpersStore.collapse,
        })}
      >
        {ncirccUiStore.allNotification.map((item) => {
          return <NCIRCCNotification key={item.id} message={item} />;
        })}
      </div>
      <div
        style={widthNotificationIsVisibleMessenger}
        className={styles.pagination}
      >
        <Pagination
          onChange={ncirccUiStore.setMessagePaginationState}
          current={ncirccUiStore.getMessagePaginationState.current}
          pageSize={ncirccUiStore.getMessagePaginationState.pageSize}
          total={ncirccUiStore.getMessagePaginationState.total}
        />
      </div>
    </div>
  );
});
