import { FC } from 'react';
import { GSX_SERVICE_CALLED, GSX_SERVICE_FINISHED } from '../../constants';
import { LoadingState } from '../../types/general';
import { WASMDataF } from '../../types/WASMData';
import { CoherentCallOptionsSet } from '../../utils/utils';
import ToggleComponentKH from '../toggleComponent/ToggleComponent';

interface OptionsFProps {
  WASMData: WASMDataF;
  loadingState: LoadingState;
}

const OptionsF: FC<OptionsFProps> = ({ WASMData, loadingState }) => {
  const GSXActive = () => {
    return (
      (WASMData.GSX.boardingState >= GSX_SERVICE_CALLED || WASMData.GSX.deboardingState >= GSX_SERVICE_CALLED) &&
      WASMData.GSX.deboardingState !== GSX_SERVICE_FINISHED
    );
  };

  return (
    <>
      <div className="block flex w-full flex-col opacity-100 transition-opacity duration-150 ease-linear mb-4">
        <div className="relative flex w-full items-center justify-between rounded-md bg-zinc-600 p-2 px-4">
          <ToggleComponentKH
            optionName="GSX Sync"
            value={WASMData.options.GSXSync}
            leftLabel={{ value: true }}
            rightLabel={{ value: false }}
            backgroundColor="bg-zinc-700"
            setValue={(value) => {
              CoherentCallOptionsSet(value);
            }}
            disabled={loadingState !== 'preview' || GSXActive()}
          />
        </div>
      </div>
    </>
  );
};

export default OptionsF;