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

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

  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 handleSubmit = async (values: FormValues) => {
    const updatedValues = {
      ...values,
      sightingVolume: state.sightingVolume,
      NPEDsoundVolume: state.NPEDsoundVolume,
      hotlistSoundVolume: state.hotlistSoundVolume,
    };

    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>
        </Form>
      )}
    </Formik>
  );
};

export default SoundSettingsFields;