import React from "react";
import { fn } from "@storybook/test";
import { Popover as PopoverWrapper } from "../components/Popover";
import { Button } from "../components/Button";
import { Input } from "../components/Input";

export default {
  title: "Components/Popover",
  component: PopoverWrapper,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
  },
  argTypes: {
    open: {
      description: "If true, display Popover.",
      table: {
        defaultValue: { summary: false },
        type: { summary: "boolean" },
      },
    },
    anchorEl: {
      description: "Anchor element for the Popover",
      table: { type: { summary: "Element" } },
    },
    title: {
      description: "Title displayed in the Popover header",
      table: {
        type: { summary: "string" },
      },
      control: { type: "text" },
    },
    primaryButtonLabel: {
      description: "Label of the primary action button shown in the footer",
      table: { type: { summary: "string" } },
      control: { type: "text" },
    },
    secondaryButtonLabel: {
      description: "Label of the secondary action button shown in the footer",
      table: { type: { summary: "string" } },
      control: { type: "text" },
    },
    onPrimaryButtonClick: {
      description: "Callback invoked on primary button click",
      table: { type: { summary: "() => void" } },
    },
    onSecondaryButtonClick: {
      description: "Callback invoked on secondary button click",
      table: { type: { summary: "() => void" } },
    },
    primaryButtonProps: {
      description: "Props for the primary button",
      table: { type: { summary: "object" } },
    },
    secondaryButtonProps: {
      description: "Props for the secondary button",
      table: { type: { summary: "object" } },
    },
    onClose: {
      description: "Callback invoked when closing the Popover",
      table: { type: { summary: "() => void" } },
    },
    children: {
      description: "Content rendered inside the Popover body",
      table: { type: { summary: "React.ReactNode" } },
    },
  },
  args: {
    onPrimaryButtonClick: fn(),
    onSecondaryButtonClick: fn(),
    onClose: fn(),
  },
};

const Popover = (args) => {
  const [open, setOpen] = React.useState(false);
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleTriggerClick = (event) => {
    setAnchorEl(event.currentTarget);
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <React.Fragment>
      <Button onClick={handleTriggerClick}>Open Popover</Button>
      <PopoverWrapper
        {...args}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
        transformOrigin={{ vertical: "top", horizontal: "left" }}
      />
    </React.Fragment>
  );
};

export const Default = (args) => <Popover {...args} />;

Default.args = {
  title: "Popover Title",
  primaryButtonLabel: "Apply",
  secondaryButtonLabel: "Cancel",
  children: (
    <div style={{ display: "grid", gap: 12, width: 320 }}>
      <Input
        label="Name"
        placeholder="Enter your name"
        isHelperText
        helperText="This is a helper"
      />
      <Input label="Email" placeholder="Enter your email" />
    </div>
  ),
  anchorOrigin: { vertical: "bottom", horizontal: "left" },
  transformOrigin: { vertical: "top", horizontal: "left" },
  open: open,
  onClose: () => {},
  anchorEl: null,
};
