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

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

const OptionsF: FC<OptionsFProps> = ({ WASMData, loadingState, gsxActive }) => {
  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>

      <div className="block flex w-full flex-col opacity-100 transition-opacity duration-150 ease-linear mb-4">
        {WASMData.userData.isER ? (
          <>
            <h2 className="text-sm font-medium uppercase">SimBrief Profile Settings - ER Variant</h2>
            <table className="text-xs">
              <tbody>
                <tr>
                  <td className="p-1 px-2">Max Passengers</td>
                  <td className="p-1 px-2">0</td>
                </tr>
                <tr>
                  <td className="p-1 px-2">Passenger Weight</td>
                  <td className="p-1 px-2">1 {WASMData.userData.isImperial ? 'lbs' : 'kg'}</td>
                </tr>
                <tr>
                  <td className="p-1 px-2">Bag Weight</td>
                  <td className="p-1 px-2">0 {WASMData.userData.isImperial ? 'lbs' : 'kg'}</td>
                </tr>
                <tr>
                  <td className="p-1 px-2">Empty Weight</td>
                  <td className="p-1 px-2">{WASMData.userData.isImperial ? '249537 lbs' : '113188 kg'}</td>
                </tr>
                <tr>
                  <td className="p-1 px-2">Max Zero Fuel Weight</td>
                  <td className="p-1 px-2">{WASMData.userData.isImperial ? '451300 lbs' : '204706 kg'}</td>
                </tr>
                <tr>
                  <td className="p-1 px-2">Max Takeoff Weight</td>
                  <td className="p-1 px-2">{WASMData.userData.isImperial ? '630500 lbs' : '285990 kg'}</td>
                </tr>
                <tr>
                  <td className="p-1 px-2">Max Fuel Capacity</td>
                  <td className="p-1 px-2">{WASMData.userData.isImperial ? '282619 lbs' : '128193 kg'}</td>
                </tr>
              </tbody>
            </table>
          </>
        ) : (
          <>
            <h2 className="text-sm font-medium uppercase">SimBrief Profile Settings - Normal variant</h2>
            <table className="text-xs">
              <tbody>
                <tr>
                  <td className="p-1 px-2">Max Passengers</td>
                  <td className="p-1 px-2">0</td>
                </tr>
                <tr>
                  <td className="p-1 px-2">Passenger Weight</td>
                  <td className="p-1 px-2">1 {WASMData.userData.isImperial ? 'lbs' : 'kg'}</td>
                </tr>
                <tr>
                  <td className="p-1 px-2">Bag Weight</td>
                  <td className="p-1 px-2">0 {WASMData.userData.isImperial ? 'lbs' : 'kg'}</td>
                </tr>
                <tr>
                  <td className="p-1 px-2">Empty Weight</td>
                  <td className="p-1 px-2">{WASMData.userData.isImperial ? '249137 lbs' : '113006 kg'}</td>
                </tr>
                <tr>
                  <td className="p-1 px-2">Max Zero Fuel Weight</td>
                  <td className="p-1 px-2">{WASMData.userData.isImperial ? '451300 lbs' : '204706 kg'}</td>
                </tr>
                <tr>
                  <td className="p-1 px-2">Max Takeoff Weight</td>
                  <td className="p-1 px-2">{WASMData.userData.isImperial ? '625500 lbs' : '283722 kg'}</td>
                </tr>
                <tr>
                  <td className="p-1 px-2">Max Fuel Capacity</td>
                  <td className="p-1 px-2">{WASMData.userData.isImperial ? '256207 lbs' : '116213 kg'}</td>
                </tr>
              </tbody>
            </table>
          </>
        )}
      </div>

      <div className="block flex w-full flex-col opacity-100 transition-opacity duration-150 ease-linear mb-4">
        <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={CoherentCallGSXReset}
        >
          Reset internal GSX state
        </button>
      </div>
    </>
  );
};

export default OptionsF;
