import { Formik, Form } from "formik";
import BearerTypeCard from "./BearerTypeCard";
import ChannelCard from "./ChannelCard";
import type { BearerTypeFields, FormTypes, OptionalBOF2Constants, OptionalUTMCConstants } from "../../../types/types";
import { usePostBearerConfig } from "../hooks/useBearer";
import { useDispatcherConfig } from "../hooks/useDispatcherConfig";
import { useOptionalConstants } from "../hooks/useOptionalConstants";

const OutputForms = () => {
  const { bearerMutation } = usePostBearerConfig();
  const { dispatcherQuery, dispatcherMutation } = useDispatcherConfig();

  const isLoading = dispatcherQuery?.isLoading;
  const format = dispatcherQuery?.data?.propFormat?.value;
  const { optionalConstantsQuery, optionalConstantsMutation } = useOptionalConstants(format?.toLowerCase());
  const FFID = optionalConstantsQuery?.data?.propFeedIdentifier?.value;
  const SCID = optionalConstantsQuery?.data?.propSourceIdentifier?.value;
  const timestampSource = optionalConstantsQuery?.data?.propTimeZoneType?.value;
  const gpsFormat = optionalConstantsQuery?.data?.propGpsFormat?.value;

  const inititalValues: FormTypes = {
    format: format ?? "JSON",
    enabled: true,
    backOfficeURL: "",
    username: "",
    password: "",
    connectTimeoutSeconds: Number(5),
    readTimeoutSeconds: Number(15),
    overviewQuality: "HIGH",
    cropSizeFactor: "3/4",

    // optional constants
    FFID: FFID ?? "",
    SCID: SCID ?? "",
    timestampSource: timestampSource ?? "UTC",
    GPSFormat: gpsFormat ?? "Minutes",

    //BOF2 - optional Lane IDs
    laneId: "",
    LID1: "",
    LID2: "",

    // ftp - fields
  };

  const handleSubmit = async (values: FormTypes) => {
    const bearerTypeFields = {
      format: values.format,
      enabled: values.enabled,
    };

    const bearerFields: BearerTypeFields = {
      format: values.format,
      enabled: values.enabled,
      backOfficeURL: values.backOfficeURL,
      username: values.username,
      password: values.password,
      connectTimeoutSeconds: values.connectTimeoutSeconds,
      readTimeoutSeconds: values.readTimeoutSeconds,
      overviewQuality: values.overviewQuality,
      cropSizeFactor: values.cropSizeFactor,
    };

    const result = await dispatcherMutation.mutateAsync(bearerTypeFields);

    if (result?.id) {
      await bearerMutation.mutateAsync(bearerFields);

      if (values.format === "BOF2") {
        const optionalBOF2Fields: OptionalBOF2Constants = {
          format: values.format,
          FFID: values.FFID,
          SCID: values.SCID,
          timestampSource: values.timestampSource,
          GPSFormat: values.GPSFormat,
        };
        await optionalConstantsMutation.mutateAsync(optionalBOF2Fields);
      }
      if (values.format === "UTMC") {
        const optionalUTMCFields: OptionalUTMCConstants = {
          format: values.format,
          SCID: values.SCID,
          timestampSource: values.timestampSource,
          GPSFormat: values.GPSFormat,
        };
        await optionalConstantsMutation.mutateAsync(optionalUTMCFields);
      }
    }
  };

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
      <Form className="grid grid-cols-1 md:grid-cols-2">
        <BearerTypeCard />
        <ChannelCard />
      </Form>
    </Formik>
  );
};

export default OutputForms;
