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

import { useFormikContext, type FormikTouched } from "formik";
import Card from "../../UI/Card";
import CardHeader from "../../UI/CardHeader";
import ChannelFields from "./ChannelFields";
import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
import { useCameraBackOfficeOutput } from "../../../hooks/useCameraBackOfficeOutput";
import { useEffect, useMemo } from "react";

type ChannelCardProps = {
  touched: FormikTouched<BearerTypeFieldType & InitialValuesForm>;
  isSubmitting: boolean;
  handleFormSubmit: (values: BearerTypeFieldType & InitialValuesForm) => Promise<void>;
};

const ChannelCard = ({ touched, isSubmitting, handleFormSubmit }: ChannelCardProps) => {
  const { values, resetForm } = useFormikContext<BearerTypeFieldType & InitialValuesForm>();
  const { backOfficeQuery, backOfficeMutation } = useCameraBackOfficeOutput(values?.format);

  const mapped = useMemo(() => {
    const d = backOfficeQuery.data;
    return {
      backOfficeURL: d?.propBackofficeURL?.value ?? "",
      username: d?.propUsername?.value ?? "",
      password: d?.propPassword?.value ?? "",
      connectTimeoutSeconds: Number(d?.propConnectTimeoutSeconds?.value),
      readTimeoutSeconds: Number(d?.propReadTimeoutSeconds?.value),
    };
  }, [backOfficeQuery.data]);

  useEffect(() => {
    if (!backOfficeQuery.isSuccess) return;
    resetForm({ values: { ...values, ...mapped } });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [backOfficeQuery.isSuccess, mapped]);

  console.log(backOfficeQuery.isFetching);
  const handleSubmit = async () => {
    const backOfficeData = {
      format: values.format,
      backOfficeURL: values.backOfficeURL,
      connectTimeoutSeconds: values.connectTimeoutSeconds,
      password: values.password,
      readTimeoutSeconds: values.readTimeoutSeconds,
      username: values.username,
    };
    await backOfficeMutation.mutateAsync(backOfficeData);
  };

  return (
    <Card className="p-4">
      <CardHeader title={`Channel (${values?.format})`} />
      <ChannelFields
        touched={touched}
        isSubmitting={isSubmitting}
        backOfficeData={backOfficeQuery}
        backOfficeMutation={backOfficeMutation}
        handleFormSubmit={handleFormSubmit}
        handleSubmit={handleSubmit}
      />
    </Card>
  );
};

export default ChannelCard;