import * as React from 'react';
import { FixedSizeList as List } from 'react-window';
import { type IHistoryState } from '../../Interfaces/IHistoryState';
import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar';

interface IHistoryProps {
  history: IHistoryState[]
  historyCurrentStep: number
  jumpTo: (move: number) => void
}

export function History(props: IHistoryProps): JSX.Element {
  function Row({ index, style }: { index: number, style: React.CSSProperties }): JSX.Element {
    const reversedIndex = (props.history.length - 1) - index;
    const step = props.history[reversedIndex];
    const desc = step.lastAction;

    const selectedClass: string = reversedIndex === props.historyCurrentStep
      ? 'border-l-4 bg-blue-500 shadow-lg shadow-blue-500/60 hover:bg-blue-600 hover:shadow-blue-500 text-slate-50'
      : 'bg-slate-300/60 hover:bg-slate-400 hover:shadow-slate-400';

    return (
      <button type="button"
        key={reversedIndex}
        style={style}
        onClick={() => { props.jumpTo(reversedIndex); }}
        title={step.lastAction}
        className={`w-full elements-sidebar-row border-blue-500 whitespace-pre overflow-hidden
            text-left text-sm font-medium transition-all ${selectedClass}`}
      >
        {desc}
      </button>
    );
  }

  return (
    <List
      className='List overflow-x-hidden'
      itemCount={props.history.length}
      itemSize={35}
      height={window.innerHeight - TITLE_BAR_HEIGHT}
      width={'100%'}
    >
      {Row}
    </List>
  );
}