xkhofmann-tfdidesign-md11-load-manager/PackageSources/js-bundle/src/components/options/OptionsPax.tsx

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

interface OptionsPaxProps {
  WASMData: WASMDataPax;
  loadingState: LoadingState;
}

const OptionsPax: FC<OptionsPaxProps> = ({ WASMData, loadingState }) => {
  const [paxWeight, setPaxWeight] = useState(WASMData.options.paxWeight);
  const [bagWeight, setBagWeight] = useState(WASMData.options.bagWeight);

  const GSXActive = () => {
    return (
      (WASMData.GSX.boardingState >= GSX_SERVICE_CALLED || WASMData.GSX.deboardingState >= GSX_SERVICE_CALLED) &&
      WASMData.GSX.deboardingState !== GSX_SERVICE_FINISHED
    );
  };

  const updateData = () => {
    CoherentCallOptionsSet(undefined, paxWeight, bagWeight);
  };

  const handleInput = (input: string, maxValue: number, setter: (value: number) => void) => {
    if (!input) {
      setter(0);
      return;
    }

    const converted = parseInt(input);
    if (converted) {
      if (converted < 0) setter(0);
      else if (converted > maxValue) setter(maxValue);
      else setter(converted);
    }
  };

  useEffect(() => updateData(), [paxWeight, bagWeight]);

  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">
        <div className="relative flex w-full items-center justify-between rounded-t-md bg-zinc-600 p-2 px-4">
          <div className="flex w-full items-center justify-between text-xs">
            <label>Pax Weight ({WASMData.userData.isImperial ? 'lbs' : 'kg'})</label>
            <input
              type="text"
              placeholder=""
              className="w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right focus:border-blue-600 focus:ring-blue-600"
              value={paxWeight}
              onChange={(e) => handleInput(e.target.value, Number.MAX_VALUE, setPaxWeight)}
              disabled={loadingState !== 'preview' || GSXActive()}
            />
          </div>
        </div>
        <div className="relative flex w-full items-center justify-between rounded-b-md bg-zinc-700 p-2 px-4">
          <div className="flex w-full items-center justify-between text-xs">
            <label>Bag Weight ({WASMData.userData.isImperial ? 'lbs' : 'kg'})</label>
            <input
              type="text"
              placeholder=""
              className="w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right focus:border-blue-600 focus:ring-blue-600"
              value={bagWeight}
              onChange={(e) => handleInput(e.target.value, Number.MAX_VALUE, setBagWeight)}
              disabled={loadingState !== 'preview' || GSXActive()}
            />
          </div>
        </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">
              <tr>
                <td className="p-1 px-2">Max Passengers</td>
                <td className="p-1 px-2">298</td>
              </tr>
              <tr>
                <td className="p-1 px-2">Passenger Weight</td>
                <td className="p-1 px-2">
                  {WASMData.options.paxWeight} {WASMData.userData.isImperial ? 'lbs' : 'kg'}
                </td>
              </tr>
              <tr>
                <td className="p-1 px-2">Bag Weight</td>
                <td className="p-1 px-2">
                  {WASMData.options.bagWeight} {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 ? '286275 lbs' : '129851 kg'}</td>
              </tr>
              <tr>
                <td className="p-1 px-2">Max Zero Fuel Weight</td>
                <td className="p-1 px-2">{WASMData.userData.isImperial ? '400000 lbs' : '181437 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>
            </table>
          </>
        ) : (
          <>
            <h2 className="text-sm font-medium uppercase">SimBrief Profile Settings - Normal variant</h2>
            <table className="text-xs">
              <tr>
                <td className="p-1 px-2">Max Passengers</td>
                <td className="p-1 px-2">298</td>
              </tr>
              <tr>
                <td className="p-1 px-2">Passenger Weight</td>
                <td className="p-1 px-2">
                  {WASMData.options.paxWeight} {WASMData.userData.isImperial ? 'lbs' : 'kg'}
                </td>
              </tr>
              <tr>
                <td className="p-1 px-2">Bag Weight</td>
                <td className="p-1 px-2">
                  {WASMData.options.bagWeight} {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 ? '285875 lbs' : '129671 kg'}</td>
              </tr>
              <tr>
                <td className="p-1 px-2">Max Zero Fuel Weight</td>
                <td className="p-1 px-2">{WASMData.userData.isImperial ? '400000 lbs' : '181437 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>
            </table>
          </>
        )}
      </div>
    </>
  );
};

export default OptionsPax;