import React from "react";
import { Meta } from "@storybook/react";
import { PopupProps } from "./PopupProps";
import Popup from "./Popup";
import Button from "../Buttons/Button/Button";

export default {
  title: "Design System/Popup",
  component: Popup,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact Popup positions a piece of content next to a specific anchor component. \n\n```javascript\nimport { Popup } 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: "Popup anchor description",
    },
    anchorAlign: {
      control: { type: "object" },
      description: "Popup anchor alignment description",
    },
    animate: {
      control: { type: "boolean" },
      description: "Popup animation description",
    },
    appendTo: {
      control: { type: "object" },
      description: "Popup append to description",
    },
    className: {
      control: { type: "text" },
      description: "Popup class name description",
    },
    collision: {
      control: { type: "object" },
      description: "Popup collision description",
    },
    id: {
      control: { type: "text" },
      description: "Popup ID description",
    },
    margin: {
      control: { type: "object" },
      description: "Popup margin description",
    },
    offset: {
      control: { type: "object" },
      description: "Popup offset description",
    },
    popupAlign: {
      control: { type: "object" },
      description: "Popup alignment description",
    },
    popupClass: {
      control: { type: "text" },
      description: "Popup class description",
    },
    positionMode: {
      control: { type: "radio", options: ["absolute", "fixed"] },
      description: "Popup position mode description",
    },
    scale: {
      control: { type: "number" },
      description: "Popup scale description",
    },
    show: {
      control: { type: "boolean" },
      description: "Popup show description",
    },
    style: {
      control: { type: "object" },
      description: "Popup style description",
    },
    onClose: {
      action: "onClose",
      description: "Popup onClose event description",
    },
    onOpen: {
      action: "onOpen",
      description: "Popup onOpen event description",
    },
    onPosition: {
      action: "onPosition",
      description: "Popup onPosition event description",
    },
  },
} as Meta;

export const Default = ({
  show: storybookShow,
  ...args
}: PopupProps): JSX.Element => {
  const anchor = React.useRef<any>();
  const [show, setShow] = React.useState(storybookShow);

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

  const onClick = () => {
    setShow(!show);
  };

  return (
    <div style={{ display: "flex", justifyContent: "center" }}>
      <Button onClick={onClick} ref={anchor}>
        {show ? "Hide" : "Show"}
      </Button>
      <Popup anchor={anchor.current} show={show} {...args}>
        Popup content.
      </Popup>
    </div>
  );
};

Default.args = {
  dataTestId: "popup-data-testid",
  show: false,
  anchorAlign: { horizontal: "left", vertical: "bottom" },
  popupAlign: { horizontal: "left", vertical: "top" },
  collision: { horizontal: "fit", vertical: "flip" },
  margin: { horizontal: 0, vertical: 0 },
  offset: { left: 0, top: 0 },
  positionMode: "absolute",
  scale: 1,
  animate: false,
  appendTo: null,
  className: "",
  popupClass: "",
  style: { with: "100%", height: "100%" },
  onClose: () => {},
  onOpen: () => {},
  onPosition: () => {},
};