/* 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 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 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>
            {/* Overview quality and scale */}
            <FormGroup>
              <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>
            </FormGroup>
            {/* propOverviewImageScaleFactor cropSizeFactor */}
            <FormGroup>
              <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>
            </FormGroup>
            {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>
                  <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={"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={"Minutes"}>Minutes</option>
                      <option value={"Decimal Degrees"}>Decimal degrees</option>
                    </Field>
                  </FormGroup>
                </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>
                  <FormGroup>
                    <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`}
                    />
                  </FormGroup>
                  <FormGroup>
                    <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`}
                    />
                  </FormGroup>
                </div>
              </>
            )}
          </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;