Mav-Mobile-UI/src/components/SettingForms/Sound/SoundSettingsFields.tsx

import { Field, FieldArray, Form, Formik } from "formik";
import FormGroup from "../components/FormGroup";
import type { FormValues, Hotlist } from "../../../types/types";
import { useSoundContext } from "../../../context/SoundContext";
import { useCameraBlackboard } from "../../../hooks/useCameraBlackboard";
import { toast } from "sonner";

const SoundSettingsFields = () => {
  const { state, dispatch } = useSoundContext();
  const { mutation } = useCameraBlackboard();

  const hotlists: Hotlist[] = state.hotlists;

  const soundOptions = state?.soundOptions?.map((soundOption) => ({
    value: soundOption?.name,
    label: soundOption?.name,
  }));

  const initialValues: FormValues = {
    sightingSound: state.sightingSound ?? "switch",
    NPEDsound: state.NPEDsound ?? "popup",
    hotlists,
  };

  const handleSubmit = async (values: FormValues) => {
    dispatch({ type: "UPDATE", payload: values });
    const result = await mutation.mutateAsync({
      operation: "INSERT",
      path: "soundSettings",
      value: values,
    });
    if (result.reason !== "OK") {
      toast.error("Cannot update sound settings");
    } else {
      toast.success("Sound Settings successfully updated");
    }
  };
  return (
    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
      {({ values }) => (
        <Form className="flex flex-col space-y-3">
          <FormGroup>
            <label htmlFor="sightingSound">Sighting Sound</label>
            <Field
              as="select"
              name="sightingSound"
              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]  w-full md:w-60"
            >
              {soundOptions?.map(({ value, label }) => {
                return (
                  <option key={value} value={value}>
                    {label}
                  </option>
                );
              })}
            </Field>
          </FormGroup>
          <FormGroup>
            <label htmlFor="NPEDsound">NPED notification Sound</label>
            <Field
              as="select"
              name="NPEDsound"
              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]  w-full md:w-60"
            >
              {soundOptions?.map(({ value, label }) => (
                <option key={value} value={value}>
                  {label}
                </option>
              ))}
            </Field>
          </FormGroup>
          <div>
            <h3 className="text-lg font-semibold mb-2">Hotlist Sounds</h3>
            <FormGroup>
              <FieldArray
                name="hotlists"
                render={() => (
                  <div className="w-full m-2">
                    {values?.hotlists?.length > 0 ? (
                      values?.hotlists?.map((hotlist, index) => (
                        <div
                          key={hotlist.name}
                          className="flex items-center m-2 w-full justify-between"
                        >
                          <label
                            htmlFor={`hotlists.${index}.sound`}
                            className="w-32 shrink-0"
                          >
                            {hotlist.name}
                          </label>
                          <Field
                            as="select"
                            name={`hotlists.${index}.sound`}
                            id={`hotlists.${index}.sound`}
                            className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]  w-full md:w-60"
                          >
                            {soundOptions?.map(({ value, label }) => (
                              <option key={value} value={value}>
                                {label}
                              </option>
                            ))}
                          </Field>
                        </div>
                      ))
                    ) : (
                      <p>No hotlists yet, Add one</p>
                    )}
                  </div>
                )}
              />
            </FormGroup>
          </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"
          >
            Save Settings
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default SoundSettingsFields;