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";

const SoundSettingsFields = () => {
  const hotlists: Hotlist[] = [
    { name: "hotlist0", sound: "" },
    { name: "hotlist1", sound: "" },
    { name: "hotlist2", sound: "" },
  ];

  const soundOptions = [
    {
      value: "switch",
      label: "Switch (Default)",
    },
    {
      value: "notification",
      label: "Notification",
    },
    {
      value: "popup",
      label: "popup",
    },
  ];

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

  const handleSubmit = (values: FormValues) => {
    console.log(values);
  };

  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>
                    {values.hotlists.length > 0 ? (
                      values.hotlists.map((hotlist, index) => (
                        <div
                          key={hotlist.name}
                          className="flex items-center gap-3"
                        >
                          <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>
                      ))
                    ) : (
                      <>No hotlists yet, Add one</>
                    )}
                  </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;