import { FC } from 'react';
import { LoadingState } from '../../types/general';

interface ActionBarProps {
  loadingState: LoadingState;
  acceptDisabled: boolean;
  accept: () => void;
  reject: () => void;
  importSB?: () => void;
  load: () => void;
  unload: () => void;
}

const ActionBar: FC<ActionBarProps> = ({ loadingState, acceptDisabled, accept, reject, importSB, load, unload }) => {
  return (
    <div className="relative flex w-full items-center justify-start gap-x-6">
      {loadingState === 'preview' && (
        <button
          className="middle none center rounded-lg bg-green-600 px-6 py-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-green-500/20 transition-all hover:shadow-lg hover:shadow-green-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
          data-ripple-light="true"
          onClick={accept}
          disabled={acceptDisabled}
        >
          Accept
        </button>
      )}
      {/*TODO: Make GSX optional (accepted state for NON GSX) */}
      {loadingState === 'loaded' && (
        <button
          className="middle none center rounded-lg bg-red-600 px-6 py-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-red-500/20 transition-all hover:shadow-lg hover:shadow-red-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
          data-ripple-light="true"
          onClick={reject}
        >
          Reject
        </button>
      )}

      <div className="grow" />

      {!!importSB && loadingState === 'preview' && (
        <button
          className="middle none center rounded-lg bg-green-600 px-6 py-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-green-500/20 transition-all hover:shadow-lg hover:shadow-green-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
          data-ripple-light="true"
          onClick={importSB}
        >
          Import from SimBrief
        </button>
      )}
      {/*TODO: Make GSX optional */}
      {/*
      {loadingState === 'accepted' && (
        <button
          className="middle none center rounded-lg bg-green-600 px-6 py-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-green-500/20 transition-all hover:shadow-lg hover:shadow-green-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
          data-ripple-light="true"
          onClick={load}
        >
          Load
        </button>
      )}
      {loadingState === 'loaded' && (
        <button
          className="middle none center rounded-lg bg-red-600 px-6 py-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-red-500/20 transition-all hover:shadow-lg hover:shadow-red-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
          data-ripple-light="true"
          onClick={unload}
        >
          Unload
        </button>
      )}
      */}
    </div>
  );
};

export default ActionBar;