import { Input } from '@headlessui/react';
import { FormEvent, useState } from 'react';
import InputLabel from './InputLabel';
import Modal from './Modal';
import PrimaryButton from './PrimaryButton';

export default function ModalAñadirCancion({
  showaddmodal,
  addcancion,
  setShowaddmodal,
}: {
  showaddmodal: boolean;
  addcancion: (event: FormEvent<HTMLFormElement>) => void;
  setShowaddmodal: (arg0: boolean) => void;
}) {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);

  return (
    <Modal
      show={showaddmodal}
      onClose={() => setShowaddmodal(false)}
      closeable={true}
      maxWidth="md"
    >
      <form onSubmit={addcancion} className="p-6">
        <h2 className="mb-2 text-lg font-medium text-gray-900 dark:text-gray-100">
          Añadiendo Cancion
        </h2>
        <hr />
        <div className="mt-2">
          <InputLabel>Cancion a añadir. máximo 50MB</InputLabel>
          <Input
            type="file"
            onChange={(e: any) => setSelectedFile(e.target.files[0])}
            name="song"
            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm file:mr-4 file:rounded-md file:border-0 file:bg-indigo-100 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
          />
          <hr className="mt-2" />
          <div className="flex place-content-center">
            <PrimaryButton
              className="mt-2"
              type="submit"
              disabled={!selectedFile}
            >
              Subir
            </PrimaryButton>
          </div>
        </div>
      </form>
    </Modal>
  );
}