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

import { Field, 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";
import SliderComponent from "../../UI/Slider";
import { useFileUpload } from "../../../hooks/useFileUpload";
import { useSound } from "react-sounds";
import { useMemo } from "react";
import { getSoundFileURL } from "../../../utils/utils";

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

  const { query } = useFileUpload({
    queryKey: state.sightingSound ? [state.sightingSound] : undefined,
  });

  const hotlists: Hotlist[] = state.hotlists;

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

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

  const soundSrc = useMemo(() => {
    if (state?.sightingSound?.includes(".mp3") || state.sightingSound?.includes(".wav")) {
      const file = state.soundOptions?.find((item) => item.name === state.sightingSound);
      query?.refetch();
      console.log(query?.data);

      // set state
      dispatch({ type: "UPLOADEDSOUND", payload: query?.data });
      if (!query?.data) {
        query?.refetch();
        return;
      }
      //get from state?
      if (!state.uploadedSound) return "switchSound";
      const url = URL.createObjectURL(state.uploadedSound);
      return url ?? "switchSound";
    }
    return getSoundFileURL(state?.sightingSound) ?? "switchSound";
  }, [state.sightingSound, state.soundOptions]);

  const { play } = useSound(soundSrc);
  const handletest = () => {
    console.log(state.uploadedSound);
    play();
  };
  const handleSubmit = async (values: FormValues) => {
    const updatedValues = {
      ...values,
      sightingVolume: state.sightingVolume,
      NPEDsoundVolume: state.NPEDsoundVolume,
      hotlistSoundVolume: state.hotlistSoundVolume,
      soundOptions: [...(state.soundOptions ?? [])],
    };
    dispatch({ type: "UPDATE", payload: updatedValues });

    const result = await mutation.mutateAsync({
      operation: "INSERT",
      path: "soundSettings",
      value: updatedValues,
    });
    if (result.reason !== "OK") {
      toast.error("Cannot update sound settings");
    } else {
      toast.success("Sound Settings successfully updated");
    }
  };
  return (
    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
      {() => (
        <Form className="flex flex-col space-y-3">
          <FormGroup>
            <div className="flex flex-col md:flex-row space-y-2 w-full justify-between gap-3">
              <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={label} value={value}>
                      {label}
                    </option>
                  );
                })}
              </Field>
              <SliderComponent soundCategory="SIGHTINGVOLUME" />
            </div>
          </FormGroup>
          <FormGroup>
            <div className="flex flex-col md:flex-row space-y-2 w-full justify-between gap-3">
              <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>
              <SliderComponent soundCategory="NPEDVOLUME" />
            </div>
          </FormGroup>
          <div>
            <h3 className="text-lg font-semibold mb-2">Hotlist Sounds</h3>
            <FormGroup>
              <div className="flex flex-col md:flex-row space-y-2 w-full justify-between gap-3">
                <label htmlFor="hotlistSound">All hotlist Sounds</label>
                <Field
                  as="select"
                  name="hotlistSound"
                  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>
                <SliderComponent soundCategory="HOTLISTVOLUME" />
              </div>
            </FormGroup>
            {/* <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>
          <button onClick={handletest} type="button">
            click
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default SoundSettingsFields;