import { Form, Formik } from "formik";
import FormGroup from "../components/FormGroup";
import type { SoundUploadValue } from "../../../types/types";

const SoundUpload = () => {
  const initialValues: SoundUploadValue = {
    soundFile: null,
  };

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

  return (
    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
      {({ setFieldValue }) => (
        <Form>
          <FormGroup>
            <label htmlFor="soundFile">Sighting Sound</label>
            <input
              type="file"
              name="soundFile"
              id="sightingSoundinput"
              onChange={(e) => {
                if (
                  e.target.files &&
                  e.target.files[0].type.lastIndexOf(".mp3")
                )
                  setFieldValue("sightingSound", e.target.files[0]);
              }}
            />
          </FormGroup>
          <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"
          >
            Upload
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default SoundUpload;