BayIQ-UI/src/features/output/components/ChannelFields.tsx

import { Field, FieldArray } from "formik";
import type { FormTypes, InitialValuesFormErrors, OutputDataResponse } from "../../../types/types";
import { useEffect, useMemo } from "react";
import { useOptionalConstants } from "../hooks/useOptionalConstants";

type ChannelFieldsProps = {
  values: FormTypes;
  errors: InitialValuesFormErrors;
  touched: {
    connectTimeoutSeconds?: boolean | undefined;
    readTimeoutSeconds?: boolean | undefined;
  };
  outputData?: OutputDataResponse;
  onSetFieldValue: (field: string, value: string, shouldValidate?: boolean | undefined) => void;
};

const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: ChannelFieldsProps) => {
  const { optionalConstantsQuery } = useOptionalConstants(outputData?.id?.split("-")[1] || "");
  const optionalConstants = optionalConstantsQuery?.data;

  const channelFieldsObject = useMemo(() => {
    return {
      connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || "5",
      readTimeoutSeconds: outputData?.propReadTimeoutSeconds?.value || "15",
      backOfficeURL: outputData?.propBackofficeURL?.value || "",
      username: outputData?.propUsername?.value || "",
      password: outputData?.propPassword?.value || "",
      SCID: optionalConstants?.propSourceIdentifier?.value || "",
      timestampSource: optionalConstants?.propTimeZoneType?.value || "UTC",
      GPSFormat: optionalConstants?.propGpsFormat?.value || "Minutes",
      FFID: optionalConstants?.propFeedIdentifier?.value || "",
    };
  }, [
    optionalConstants?.propFeedIdentifier?.value,
    optionalConstants?.propGpsFormat?.value,
    optionalConstants?.propSourceIdentifier?.value,
    optionalConstants?.propTimeZoneType?.value,
    outputData?.propBackofficeURL?.value,
    outputData?.propConnectTimeoutSeconds?.value,
    outputData?.propPassword?.value,
    outputData?.propReadTimeoutSeconds?.value,
    outputData?.propUsername?.value,
  ]);

  useEffect(() => {
    for (const [key, value] of Object.entries(channelFieldsObject)) {
      onSetFieldValue(key, value);
    }
  }, [channelFieldsObject, onSetFieldValue, outputData]);

  return (
    <div className="flex flex-col gap-4 p-4">
      {values.format.toLowerCase() !== "ftp" ? (
        <>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="backoffice" className="block mb-2 font-medium">
              Back Office URL
            </label>
            <Field
              name={"backOfficeURL"}
              type="text"
              id="backoffice"
              placeholder="https://www.backoffice.com"
              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
            />
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="username" className="block mb-2 font-medium">
              Username
            </label>
            <Field
              name={"username"}
              type="text"
              id="username"
              placeholder="Back office username"
              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
            />
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="password">Password</label>
            <Field
              name={"password"}
              type={"password"}
              id="password"
              placeholder="Back office password"
              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
            />
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
            <Field
              name={"readTimeoutSeconds"}
              type="number"
              id="readTimeoutSeconds"
              placeholder="https://example.com"
              className={`p-1.5 border border-gray-400  rounded-lg w-full md:w-60`}
            />
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
            <Field
              name={"connectTimeoutSeconds"}
              type="number"
              id="connectTimeoutSeconds"
              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
            />
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="overviewQuality">Overview quality and scale</label>
            <Field
              name={"overviewQuality"}
              as="select"
              id="overviewQuality"
              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
            >
              <option value={"HIGH"}>High</option>
              <option value={"MEDIUM"}>Medium</option>
              <option value={"LOW"}>Low</option>
            </Field>
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="cropSizeFactor">Crop Size Factor</label>
            <Field
              name={"cropSizeFactor"}
              as="select"
              id="cropSizeFactor"
              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
            >
              <option value={"FULL"}>Full</option>
              <option value={"3/4"}>3/4</option>
              <option value={"1/2"}>1/2</option>
              <option value={"1/4"}>1/4</option>
            </Field>
          </div>
          {values.format.toLowerCase() === "utmc" && (
            <>
              <div className="border-b border-gray-500 my-3">
                <h2 className="font-bold">{values.format} Constants</h2>
              </div>

              <div className="flex flex-col md:flex-row space-y-4 justify-between">
                <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`}
                />
              </div>
              <div className="flex flex-col md:flex-row space-y-4 justify-between">
                <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={"UTC"}>UTC</option>
                  <option value={"LOCAL"}>Local</option>
                </Field>
              </div>
              <div className="flex flex-col md:flex-row space-y-4 justify-between">
                <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={"Minutes"}>Minutes</option>
                  <option value={"Decimal Degrees"}>Decimal degrees</option>
                </Field>
              </div>
            </>
          )}
          {values.format?.toLowerCase() === "bof2" && (
            <>
              <div className="space-y-3">
                <div className="border-b border-gray-500 my-3">
                  <h2 className="font-bold">{values.format} Constants</h2>
                </div>
                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <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`}
                  />
                </div>
                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <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`}
                  />
                </div>
                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <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={"UTC"}>UTC</option>
                    <option value={"LOCAL"}>Local</option>
                  </Field>
                </div>
                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <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={"Minutes"}>Minutes</option>
                    <option value={"Decimal Degrees"}>Decimal degrees</option>
                  </Field>
                </div>
              </div>
              <div className="space-y-3">
                <div className="border-b border-gray-500 my-3">
                  <h2 className="font-bold">{values.format} Lane ID Config</h2>
                </div>
                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <label htmlFor="LID1">Lane ID 1 (Camera A)</label>
                  <Field
                    name={"LID1"}
                    type="text"
                    id="LID1"
                    placeholder="10"
                    className={`p-1.5 border ${
                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
                    } rounded-lg w-full md:w-60`}
                  />
                </div>
                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <label htmlFor="LID2">Lane ID 2 (Camera B)</label>
                  <Field
                    name={"LID2"}
                    type="text"
                    id="LID2"
                    placeholder="20"
                    className={`p-1.5 border ${
                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
                    } rounded-lg w-full md:w-60`}
                  />
                </div>
              </div>
            </>
          )}
          <div className="border-b border-gray-500 my-3">
            <h2 className="font-bold">Custom Fields</h2>
          </div>
          <div className="items-center mb-4">
            <FieldArray name="customFields">
              {(arrayHelpers) => (
                <>
                  {values?.customFields?.map((_, index) => {
                    // if (!field.value) return null;
                    return (
                      <div
                        key={index}
                        className="flex flex-col md:flex-row space-y-4 md:space-y-0 justify-between items-center mb-4 gap-2"
                      >
                        <Field
                          name={`customFields.${index}.label`}
                          className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
                          placeholder={`Custom Field ${index + 1} Label`}
                        />
                        <Field
                          name={`customFields.${index}.value`}
                          className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
                          placeholder={`Custom Field ${index + 1} Value`}
                          autoComplete="off"
                        />
                      </div>
                    );
                  })}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <button
                      type="button"
                      onClick={() => arrayHelpers.push({ label: "", value: "" })}
                      className={`border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer ${values?.customFields && values?.customFields?.length >= 6 ? "opacity-50 cursor-not-allowed" : ""}`}
                      disabled={values?.customFields && values?.customFields?.length >= 6}
                    >
                      Add Custom Field
                    </button>
                    {values?.customFields && values?.customFields?.length > 0 && (
                      <button
                        type="button"
                        onClick={() => arrayHelpers.pop()}
                        className="border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
                      >
                        Remove Custom Field
                      </button>
                    )}
                  </div>
                </>
              )}
            </FieldArray>
          </div>
        </>
      ) : (
        <></>
      )}
    </div>
  );
};

export default ChannelFields;