import type { Meta, StoryObj } from "@storybook/react";

import { StateProvider } from "../../hooks";
import { Popover } from "./index";

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: "Components/Popover",
  component: Popover,
  parameters: {
    // Optional parameter to center the component in the Storybook canvas
    layout: "centered",
  },
  // More on argTypes: https://storybook.js.org/docs/api/argtypes
  argTypes: {
    onOpenChange: { action: "openChange" },
    preview: { control: "boolean" },
  },
  // Add data-id to args for the component
  args: {
    "data-id": "popover-story",
  },
} satisfies Meta<typeof Popover>;

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

// More on writing stories with args: https://storybook.js.org/docs/writing-stories#play-function
export const Default: Story = {
  render: (args) => (
    <Popover {...args}>
      <Popover.PopoverTrigger className="fancy-1">
        <StateProvider ids={["popover-story"]}>
          {() => <FancyButton className="fancy-2">Open Popover</FancyButton>}
        </StateProvider>
      </Popover.PopoverTrigger>
      <Popover.PopoverContent>
        <div
          style={{ padding: 20, border: "1px solid #ccc", background: "white" }}
        >
          <p>This is the popover content.</p>
          <Popover.PopoverClose>
            <button>Close</button>
          </Popover.PopoverClose>
        </div>
      </Popover.PopoverContent>
    </Popover>
  ),
};

export const PreviewMode: Story = {
  args: {
    preview: true,
    "data-id": "popover-story-preview",
  },
  render: (args) => (
    <Popover {...args}>
      <Popover.PopoverTrigger>
        <button>Open Popover (Preview)</button>
      </Popover.PopoverTrigger>
      <Popover.PopoverContent>
        <div
          style={{ padding: 20, border: "1px solid #ccc", background: "white" }}
        >
          <p>This popover is always open in preview mode.</p>
          <Popover.PopoverClose className="testing" asChild>
            <button>Close</button>
          </Popover.PopoverClose>
        </div>
      </Popover.PopoverContent>
    </Popover>
  ),
};

function FancyButton({ children, ...props }) {
  return <button {...props}>{children}</button>;
}

// You can add more stories here to showcase different configurations,
// like using PopoverAnchor or PopoverArrow if needed, or different
// content styles.