import { TrashIcon } from '@heroicons/react/24/outline';
import * as React from 'react';
import { FixedSizeList as List } from 'react-window';
import { MessageType } from '../../Enums/MessageType';
import { IHistoryState } from '../../Interfaces/IHistoryState';
import { IMessage } from '../../Interfaces/IMessage';
import { DISABLE_API } from '../../utils/default';
import { GetCircularReplacerKeepDataStructure } from '../../utils/saveload';
import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar';

interface IMessagesProps {
  historyState: IHistoryState
  messages: IMessage[]
  clearMessage: () => void
}

export function Messages(props: IMessagesProps): JSX.Element {
  function Row({ index, style }: {index: number, style: React.CSSProperties}): JSX.Element {
    const reversedIndex = (props.messages.length - 1) - index;
    const message = props.messages[reversedIndex];
    let classType = '';
    switch (message.type) {
      case MessageType.Success:
        classType = 'bg-green-400 hover:bg-green-400/60';
        break;

      case MessageType.Warning:
        classType = 'bg-yellow-400 hover:bg-yellow-400/60';
        break;

      case MessageType.Error:
        classType = 'bg-red-400 hover:bg-red-400/60';
        break;
    }
    return (<p
      key={`m-${reversedIndex}`}
      className={`p-2 ${classType}`}
      style={style}
    >
      {message.text}
    </p>);
  }

  const toolbarHeight = 28;

  return (
    <div>
      <div className='hover:bg-slate-300 h-7 text-right pr-1 pl-1'>
        <button
          onClick={() => { props.clearMessage(); }}
          className='h-full hover:bg-slate-400 rounded-lg p-1'
          aria-label='Clear all messages'
          title='Clear all messages'
        >
          <TrashIcon className='heroicon'></TrashIcon>
        </button>
      </div>
      <List
        className='List md:text-xs font-bold'
        itemCount={props.messages.length}
        itemSize={65}
        height={window.innerHeight - TITLE_BAR_HEIGHT - toolbarHeight}
        width={'100%'}
      >
        {Row}
      </List>
    </div>
  );
};