import * as React from 'react';
import { FixedSizeList as List } from 'react-window';
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { SymbolProperties } from '../SymbolProperties/SymbolProperties';

interface ISymbolsSidebarProps {
  selectedSymbolId: string
  symbols: Map<string, ISymbolModel>
  isOpen: boolean
  isHistoryOpen: boolean
  onPropertyChange: (key: string, value: string | number | boolean) => void
  selectSymbol: (symbolId: string) => void
}

export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
  // Render
  let isOpenClasses = '-right-64';
  if (props.isOpen) {
    isOpenClasses = props.isHistoryOpen
      ? 'right-64'
      : 'right-0';
  }

  const containers = [...props.symbols.values()];
  function Row({ index, style }: { index: number, style: React.CSSProperties }): JSX.Element {
    const container = containers[index];
    const key = container.id.toString();
    const text = key;
    const selectedClass: string = props.selectedSymbolId !== '' &&
      props.selectedSymbolId === container.id
      ? 'border-l-4 bg-slate-400/60 hover:bg-slate-400'
      : 'bg-slate-300/60 hover:bg-slate-300';

    return (
      <button type="button"
        className={`w-full border-blue-500 symbols-sidebar-row whitespace-pre
          text-left text-sm font-medium transition-all ${selectedClass}`}
        id={key}
        key={key}
        style={style}
        onClick={() => props.selectSymbol(key)}
      >
        {text}
      </button>
    );
  }

  return (
    <div className={`fixed flex flex-col bg-slate-100 text-gray-800 transition-all h-full w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
      <div className='bg-slate-100 font-bold sidebar-title'>
        Elements
      </div>
      <div className='h-96 text-gray-800'>
        <List
          className='List divide-y divide-black'
          itemCount={containers.length}
          itemSize={35}
          height={384}
          width={256}
        >
          {Row}
        </List>
      </div>
      <SymbolProperties
        symbol={props.symbols.get(props.selectedSymbolId)}
        symbols={props.symbols}
        onChange={props.onPropertyChange} />
    </div>
  );
}