import type { Meta, StoryObj } from "@storybook/react";
import { useState } from "react";
import { Sheet, Button, Input, Switch } from "@managemate/react";

const meta = {
  title: "Overlays/Sheet",
  component: Sheet,
  tags: ["autodocs"],
} satisfies Meta<typeof Sheet>;

export default meta;
type Story = StoryObj<typeof meta>;

function Demo({ side }: { side: "left" | "right" | "top" | "bottom" }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant="primary" onClick={() => setOpen(true)}>Ouvrir ({side})</Button>
      <Sheet
        open={open}
        onOpenChange={setOpen}
        side={side}
        title="Édition rapide"
        description="Modifiez sans quitter la liste."
        footer={
          <>
            <Button variant="ghost" onClick={() => setOpen(false)}>Annuler</Button>
            <Button variant="primary" onClick={() => setOpen(false)}>Sauvegarder</Button>
          </>
        }
      >
        <Input label="Nom" defaultValue="Marie Dupont" />
        <Switch label="Notifier l'équipe" defaultChecked />
      </Sheet>
    </>
  );
}

export const Right: Story = { render: () => <Demo side="right" /> };
export const Left: Story = { render: () => <Demo side="left" /> };
export const Top: Story = { render: () => <Demo side="top" /> };
export const Bottom: Story = { render: () => <Demo side="bottom" /> };