gerbeur/src/components/NewPlaylistForm.tsx

import { useState } from "react";
import { t } from "@lingui/core/macro";
import { Trans } from "@lingui/react/macro";
import type { Playlist } from "../model.ts";
import { Modal } from "./Modal.tsx";
import { PlaylistCreateForm } from "./PlaylistCreateForm.tsx";

interface NewPlaylistFormProps {
  onCreated: (playlist: Playlist) => void;
  toggleLabel?: string;
  toggleClassName?: string;
}

export function NewPlaylistForm(
  {
    onCreated,
    toggleLabel,
    toggleClassName = "new-item-toggle",
  }: NewPlaylistFormProps,
) {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button
        type="button"
        className={toggleClassName}
        onClick={() => setOpen(true)}
      >
        {toggleLabel ?? (
          <>
            +<span className="btn-new-label">
              <Trans>New playlist</Trans>
            </span>
          </>
        )}
      </button>

      {open && (
        <Modal title={t`New playlist`} onClose={() => setOpen(false)}>
          <PlaylistCreateForm
            onCreated={(playlist) => {
              onCreated(playlist);
              setOpen(false);
            }}
            onCancel={() => setOpen(false)}
          />
        </Modal>
      )}
    </>
  );
}