import * as React from 'react';
import { HistoryState } from "../../Interfaces/HistoryState";

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

export const History: React.FC<IHistoryProps> = (props: IHistoryProps) => {
  const isOpenClasses = props.isOpen ? 'right-0' : '-right-64';

  const states = props.history.map((step, move) => {
    const desc = move > 0
      ? `Go to modification n°${move}`
      : 'Go to the beginning';

    const isCurrent = move === props.historyCurrentStep;

    const selectedClass = isCurrent
      ? 'bg-blue-500 hover:bg-blue-600'
      : 'bg-slate-500 hover:bg-slate-700';

    const isCurrentText = isCurrent
      ? ' (current)'
      : '';
    return (

      <button
        key={move}
        onClick={() => props.jumpTo(move)}
        className={
          `w-full elements-sidebar-row whitespace-pre
            text-left text-sm font-medium transition-all ${selectedClass}`
        }
      >
        {desc}{isCurrentText}
      </button>
    );
  });

  // recent first
  states.reverse();

  return (
    <div className={`fixed flex flex-col bg-slate-300 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
      <div className='bg-slate-600 font-bold sidebar-title'>
          Timeline
      </div>
      <div className='overflow-y-auto overflow-x-hidden text-slate-300 flex-grow divide-y divide-solid divide-slate-600'>
        { states }
      </div>
    </div>
  );
};