Mav-Mobile-UI/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx

/* eslint-disable @typescript-eslint/no-explicit-any */
import { Field, useFormikContext, type FormikTouched } from "formik";
import FormGroup from "../components/FormGroup";
import { useEffect, useState } from "react";
import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
import { toast } from "sonner";
import type { UseQueryResult } from "@tanstack/react-query";

type ChannelFieldsProps = {
  touched: FormikTouched<BearerTypeFieldType & InitialValuesForm>;
  isSubmitting: boolean;

  backOfficeData: UseQueryResult<any, Error>;
  format?: string;
};

const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) => {
  const [showPwd, setShowPwd] = useState(false);
  const { submitCount, isValid, values, errors } = useFormikContext<BearerTypeFieldType & InitialValuesForm>();

  const ValidationToastOnce = () => {
    useEffect(() => {
      if (submitCount > 0 && !isValid) {
        toast.error("Check fields are filled in");
      }
    }, []);
    return null;
  };

  return (
    <>
      {format?.toLowerCase() !== "bof2" && format?.toLowerCase() !== "json" ? (
        <>
          <div className="mt-4 flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center">
            <div className="mb-3 rounded-xl bg-slate-800 px-3 py-1 text-xs uppercase tracking-wider text-slate-400">
              Format coming soon
            </div>

            <p className="max-w-md text-slate-300">
              Output configuration currently supports <span className="font-bold text-blue-400">JSON</span> or{" "}
              <span className="font-bold text-emerald-400">BOF2</span>. <br /> More formats will be added in future
              updates.
            </p>
          </div>
        </>
      ) : (
        <>
          <div className="flex flex-col space-y-2 px-2">
            <FormGroup>
              <label htmlFor="backoffice" className="m-0">
                Back Office URL
              </label>

              <Field
                name={"backOfficeURL"}
                type="text"
                id="backoffice"
                placeholder="https://www.backoffice.com"
                className={`p-1.5 border ${
                  errors.backOfficeURL && touched.backOfficeURL ? "border-red-500" : "border-gray-400 "
                } rounded-lg w-full md:w-60`}
              />
            </FormGroup>
            <FormGroup>
              <label htmlFor="username">Username</label>
              <Field
                name={"username"}
                type="text"
                id="username"
                placeholder="Back office username"
                className={`p-1.5 border ${
                  errors.username && touched.username ? "border-red-500" : "border-gray-400 "
                } rounded-lg w-full md:w-60`}
              />
            </FormGroup>
            <FormGroup>
              <label htmlFor="password">Password</label>
              <div className="flex gap-2 items-center relative mb-4">
                <Field
                  name={"password"}
                  type={showPwd ? "text" : "password"}
                  id="password"
                  placeholder="Back office password"
                  className={`p-1.5 border ${
                    errors.password && touched.password ? "border-red-500" : "border-gray-400 "
                  } rounded-lg w-full md:w-60`}
                />
                <FontAwesomeIcon
                  type="button"
                  className="absolute right-5 end-0"
                  onClick={() => setShowPwd((s) => !s)}
                  icon={showPwd ? faEyeSlash : faEye}
                />
              </div>
            </FormGroup>

            <FormGroup>
              <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
              <Field
                name={"connectTimeoutSeconds"}
                type="number"
                id="connectTimeoutSeconds"
                className={`p-1.5 border ${
                  errors.connectTimeoutSeconds && touched.connectTimeoutSeconds ? "border-red-500" : "border-gray-400 "
                } rounded-lg w-full md:w-60`}
              />
            </FormGroup>
            <FormGroup>
              <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
              <Field
                name={"readTimeoutSeconds"}
                type="number"
                id="readTimeoutSeconds"
                placeholder="https://example.com"
                className={`p-1.5 border ${
                  errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
                } rounded-lg w-full md:w-60`}
              />
            </FormGroup>

            {format?.toLowerCase() === "bof2" && (
              <>
                <div className="border-b border-gray-500 my-3">
                  <h2 className="font-bold">{values.format} Constants</h2>
                </div>
                <FormGroup>
                  <label htmlFor="FFID">Feed ID / Force ID</label>
                  <Field
                    name={"FFID"}
                    type="text"
                    id="FFID"
                    placeholder="ABC123"
                    className={`p-1.5 border ${
                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
                    } rounded-lg w-full md:w-60`}
                  />
                </FormGroup>

                <FormGroup>
                  <label htmlFor="SCID">Source ID / Camera ID</label>
                  <Field
                    name={"SCID"}
                    type="text"
                    id="SCID"
                    placeholder="DEF345"
                    className={`p-1.5 border ${
                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
                    } rounded-lg w-full md:w-60`}
                  />
                </FormGroup>

                <FormGroup>
                  <label htmlFor="timestampSource">Timestamp Source</label>
                  <Field
                    name={"timestampSource"}
                    as="select"
                    id="timestampSource"
                    className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
                  >
                    <option value="">-- Select format --</option>
                    <option value={"UTC"}>UTC</option>
                    <option value={"local"}>Local</option>
                  </Field>
                </FormGroup>
                <FormGroup>
                  <label htmlFor="GPSFormat">GPS Format</label>
                  <Field
                    name={"GPSFormat"}
                    as="select"
                    id="GPSFormat"
                    className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
                  >
                    <option value="">-- Select format --</option>
                    <option value={"Decimal degrees"}>Decimal degrees</option>
                    <option value={"minutes"}>Minutes</option>
                  </Field>
                </FormGroup>
              </>
            )}
          </div>

          <button
            type="submit"
            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
          >
            {isSubmitting ? "Saving..." : "Save Changes"}
          </button>
          <ValidationToastOnce />
        </>
      )}
    </>
  );
};

export default ChannelFields;