import { Meta } from "@storybook/react";
import { PopoverProps } from "./PopoverProps";
import {
  Popover,
  PopoverPosition,
  PopoverActionsBar,
} from "@progress/kendo-react-tooltip";
import { DropDownList } from "@progress/kendo-react-dropdowns";
import { Button } from "@progress/kendo-react-buttons";
import React from "react";

export default {
  title: "Design System/Tooltips/Popover",
  component: Popover,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact Popover component is a popup with rich interactable content, which is displayed when a related UI element is clicked or hovered over. \n\n```javascript\nimport { Popover } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    anchor: {
      control: { type: "object" },
      description: "Defines the anchor element for the Popover.",
    },
    animate: {
      control: { type: "boolean" },
      description: "Defines the animation settings of the Popover.",
    },
    appendTo: {
      control: { type: "object" },
      description:
        "Defines the container to which the Popover will be appended.",
    },
    callout: {
      control: { type: "boolean" },
      description: "Defines whether the Popover will have a callout (arrow).",
    },
    className: {
      control: { type: "text" },
      description: "Sets additional CSS classes to the Popover.",
    },
    collision: {
      control: { type: "object" },
      description: "Defines the collision behavior of the Popover.",
    },
    contentStyle: {
      control: { type: "object" },
      description: "Sets the style of the Popover content.",
    },
    id: {
      control: { type: "text" },
      description: "Sets the id of the Popover.",
    },
    margin: {
      control: { type: "object" },
      description: "Sets the margin of the Popover.",
    },
    offset: {
      control: { type: "object" },
      description: "Sets the offset of the Popover.",
    },
    popoverClass: {
      control: { type: "text" },
      description: "Sets additional CSS classes to the Popover element.",
    },
    position: {
      control: {
        type: "select",
        options: ["top", "bottom", "left", "right"],
      },
      description: "Defines the position of the Popover.",
    },
    positionMode: {
      control: { type: "select", options: ["absolute", "fixed"] },
      description: "Defines the position mode of the Popover.",
    },
    scale: {
      control: { type: "number" },
      description: "Defines the scale of the Popover.",
    },
    show: {
      control: { type: "boolean" },
      description: "Defines whether the Popover is visible.",
    },
    style: {
      control: { type: "object" },
      description: "Sets the style of the Popover.",
    },
    title: {
      control: { type: "text" },
      description: "Sets the title of the Popover.",
    },
    onClose: {
      action: "onClose",
      description: "Fires when the Popover is about to close.",
      table: {
        type: {
          summary: "function",
          detail: "(event: PopoverCloseEvent) => void",
        },
      },
    },
    onOpen: {
      action: "onOpen",
      description: "Fires when the Popover is about to open.",
      table: {
        type: {
          summary: "function",
          detail: "(event: PopoverOpenEvent) => void",
        },
      },
    },
    onPosition: {
      action: "onPosition",
      description: "Fires when the Popover is positioned.",
      table: {
        type: {
          summary: "function",
          detail: "(event: PopoverPositionEvent) => void",
        },
      },
    },
  },
} as Meta;

export const Default = (args: PopoverProps) => {
  const positions = ["top", "left", "bottom", "right"];
  const anchor = React.useRef<Button>(null);
  const [show, setShow] = React.useState(false);
  const [position, setPosition] = React.useState<PopoverPosition>("top");

  React.useEffect(() => {
    setShow(true);
  }, []);

  const onClick = () => {
    setShow(!show);
  };
  return (
    <>
      <div className={"example-config"}>
        <DropDownList
          label={"Position"}
          data={positions}
          onChange={(e) => setPosition(e.value)}
          value={position}
        />
        <br />
      </div>
      <div
        style={{ padding: "8rem", display: "flex", justifyContent: "center" }}
      >
        <Button
          style={{ display: "flex", justifyContent: "center" }}
          onClick={onClick}
          disabled={show}
          ref={anchor}
        >
          Show
        </Button>
        <Popover
          show={show}
          anchor={anchor.current && anchor.current.element}
          position={position}
          title={"Please confirm"}
        >
          Are you sure you want to continue?
          <PopoverActionsBar>
            <Button onClick={onClick} themeColor={"primary"} fillMode={"flat"}>
              Yes
            </Button>
            <Button onClick={onClick} fillMode={"flat"}>
              No
            </Button>
          </PopoverActionsBar>
        </Popover>
      </div>
    </>
  );
};

Default.args = {
  dataTestId: "popover-data-testid",
  anchor: null,
  animate: true,
  appendTo: null,
  callout: true,
  className: "",
  collision: { horizontal: "flip", vertical: "flip" },
  contentStyle: {},
  id: "",
  margin: { horizontal: 0, vertical: 0 },
  offset: { left: 0, top: 0 },
  popoverClass: "",
  position: "bottom",
  positionMode: "absolute",
  scale: 1,
  show: false,
  style: {},
  title: "",
};