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

export default function ModalEditarCancion({
  showEditModal,
  UpdateCallback,
  setShowEditModal,
  song,
}: {
  song: Cancion;
  showEditModal: boolean;
  UpdateCallback: (event: FormEvent<HTMLFormElement>) => void;
  setShowEditModal: (arg0: boolean) => void;
}) {
  return (
    <Modal
      show={showEditModal}
      onClose={() => setShowEditModal(false)}
      closeable={true}
      maxWidth="md"
    >
      <form onSubmit={UpdateCallback} className="p-6">
        <h2 className="mb-2 text-lg font-medium text-gray-900 dark:text-gray-100">
          Editando Datos Cancion
        </h2>
        <hr />
        <div className="mt-2">
          <InputLabel>Titulo</InputLabel>
          <Input
            type="text"
            name="title"
            defaultValue={song.title}
            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm hover:bg-gray-700 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"
          />
          <InputLabel>Artista</InputLabel>
          <Input
            type="text"
            name="artist"
            defaultValue={song.artist}
            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm hover:bg-gray-700 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">
              Subir Cambios
            </PrimaryButton>
          </div>
        </div>
      </form>
    </Modal>
  );
}