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

/* eslint-disable @typescript-eslint/no-explicit-any */
import { Field, Form, 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, InitialValuesFormErrors } from "../../../types/types";
import { toast } from "sonner";
import type { UseMutationResult, UseQueryResult } from "@tanstack/react-query";

type ChannelFieldsProps = {
  touched: FormikTouched<BearerTypeFieldType & InitialValuesForm>;
  isSubmitting: boolean;
  backOfficeMutation: UseMutationResult<any, Error, InitialValuesForm, unknown>;
  backOfficeData: UseQueryResult<any, Error>;
  handleFormSubmit: (values: BearerTypeFieldType & InitialValuesForm) => Promise<void>;
  handleSubmit: () => void;
};

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

  const validateValues = (values: InitialValuesForm): InitialValuesFormErrors => {
    const errors: InitialValuesFormErrors = {};

    const url = values.backOfficeURL?.trim();
    const username = values.username?.trim();
    const password = values.password?.trim();

    if (!url) {
      errors.backOfficeURL = "Required";
    }

    if (!username) errors.username = "Required";
    if (!password) errors.password = "Required";

    const read = Number(values.readTimeoutSeconds);
    if (!Number.isFinite(read)) {
      errors.readTimeoutSeconds = "Must be a number";
    } else if (read < 0) {
      errors.readTimeoutSeconds = "Must be ≥ 0";
    }

    const connect = Number(values.connectTimeoutSeconds);
    if (!Number.isFinite(connect)) {
      errors.connectTimeoutSeconds = "Must be a number";
    } else if (connect < 0) {
      errors.connectTimeoutSeconds = "Must be ≥ 0";
    }
    return errors;
  };

  const onSubmit = (values: BearerTypeFieldType & InitialValuesForm) => {
    const validationErrors = validateValues(values);
    if (Object.values(validationErrors).length > 0) {
      setErrors(validationErrors);
      return;
    }
    handleFormSubmit(values);
    handleSubmit();
  };

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

  return (
    <Form>
      <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>
      </div>
      <button
        type="button"
        onClick={() => onSubmit(values)}
        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 || backOfficeMutation.isPending ? "Saving..." : "Save Changes"}
      </button>
      <ValidationToastOnce />
    </Form>
  );
};

export default ChannelFields;