// Hooks
import { FC, memo, useEffect, useRef } from 'react';

// Types
import { TypeMessage } from 'pages/NCIRCCDashboard/types';

// Apps
import { timeFormat } from '../helpers';

//Styles
import classNames from 'classnames';
import styles from './NCIRCCIncidentMessenger.module.scss';
import { observer } from 'mobx-react-lite';
import { RootStore } from '../../../../stores/RootStore';
import { useStore } from '../../../../stores/StoreProvider';
import { Spin } from 'antd';

export type TypeMessenger = {
  messages: TypeMessage[];
  locale: {
    noMessage: string;
  };
};

export const NCIRCCIncidentMessenger: FC<TypeMessenger> = observer(
  ({ messages, locale }) => {
    const bottomRef = useRef<null | HTMLDivElement>(null);

    const rootStore: RootStore = useStore();
    const ncirccUiStore = rootStore.ncirccUiStore;

    useEffect(() => {
      // setTimeout добавлен для того что бы корректно происходил скролл.
      // Так как на первой открытой карточке при рендере не происходит скролла */
      setTimeout(() => {
        bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
      }, 300);
    }, [messages]);

    if (ncirccUiStore.isMessagesLoading) {
      return <Spin className={styles['messenger--no-data']} />;
    }

    if (!messages.length) {
      return (
        <div className={styles['messenger--no-data']}>{locale.noMessage}</div>
      );
    }

    return (
      <div className={styles['messenger']}>
        {/* div c ref={bottomRef} нужен для того что бы скролить к последнему элементу div обертки
       Так как массив сообщений приходит изначально: новые сообщения => старые сообщения,
       а показывать нужно наоборот, этот функционал решен с помощью flex-direction: column-revers вместо - Array.reverse()
       и по этому div с ref находится сверху, а не снизу.*/}
        <div ref={bottomRef} />
        {messages.map((item) => {
          const isFromConsoleMessage = item.from_console ? 'admin' : 'owner';
          return (
            <div key={item.id}>
              <div
                className={classNames(
                  styles['message'],
                  styles[`message--${isFromConsoleMessage}`],
                )}
              >
                <span className={styles['date']}>
                  {timeFormat(item.create_time)}
                </span>
                <span>{item.text}</span>
              </div>
            </div>
          );
        })}
      </div>
    );
  },
);

export default memo(NCIRCCIncidentMessenger);
