import { Meta } from "@storybook/react";
import { WindowProps } from "./WindowProps";
import Window from "./Window";
import React from "react";
import Button from "@/components/Buttons/Button/Button";

export default {
  title: "Design System/Dialogs/Window",
  component: Window,
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact Window displays content in a non-modal HTML window which can be moved and resized. \n\n```javascript\nimport { Window } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    appendTo: {
      control: { type: "object" },
      description:
        "Defines the container to which the Window will be appended. Accepts either a string (the CSS selector which will be passed to the `document.querySelector` function) or an HTML element.",
    },
    className: {
      control: { type: "text" },
      description: "Sets additional CSS classes to the Window.",
    },
    closeButton: {
      control: { type: "object" },
      description:
        "Defines the component that will be rendered as a close button in the title bar of the Window.",
    },
    doubleClickStageChange: {
      control: { type: "boolean" },
      description:
        "Specifies if the Window will change its stage (minimized, default, or maximized) when its title is double-clicked.",
    },
    draggable: {
      control: { type: "boolean" },
      description: "Specifies if the Window can be dragged.",
    },
    height: {
      control: { type: "number" },
      description: "Sets the height of the Window.",
    },
    initialHeight: {
      control: { type: "number" },
      description: "Sets the initial height of the Window.",
    },
    initialLeft: {
      control: { type: "number" },
      description: "Sets the initial left position of the Window.",
    },
    initialTop: {
      control: { type: "number" },
      description: "Sets the initial top position of the Window.",
    },
    initialWidth: {
      control: { type: "number" },
      description: "Sets the initial width of the Window.",
    },
    left: {
      control: { type: "number" },
      description: "Sets the left position of the Window.",
    },
    maximizeButton: {
      control: { type: "object" },
      description:
        "Defines the component that will be rendered as a maximize button in the title bar of the Window.",
    },
    minHeight: {
      control: { type: "number" },
      description: "Sets the minimum height of the Window.",
    },
    minimizeButton: {
      control: { type: "object" },
      description:
        "Defines the component that will be rendered as a minimize button in the title bar of the Window.",
    },
    minWidth: {
      control: { type: "number" },
      description: "Sets the minimum width of the Window.",
    },
    modal: {
      control: { type: "boolean" },
      description: "Specifies if the Window will be modal.",
    },
    overlayStyle: {
      control: { type: "object" },
      description:
        "Sets additional CSS styles to the overlay of the modal Window.",
    },
    resizable: {
      control: { type: "boolean" },
      description: "Specifies if the Window can be resized.",
    },
    restoreButton: {
      control: { type: "object" },
      description:
        "Defines the component that will be rendered as a restore button in the title bar of the Window.",
    },
    shouldUpdateOnDrag: {
      control: { type: "boolean" },
      description:
        "Specifies if the Window will update its content while being dragged.",
    },
    stage: {
      control: { type: "text" },
      description: "Sets the initial stage of the Window.",
    },
    style: {
      control: { type: "object" },
      description: "Sets additional CSS styles to the Window.",
    },
    themeColor: {
      control: { type: "text" },
      description: "Sets the theme color of the Window.",
    },
    title: {
      control: { type: "text" },
      description: "Sets the title of the Window.",
    },
    top: {
      control: { type: "number" },
      description: "Sets the top position of the Window.",
    },
    width: {
      control: { type: "number" },
      description: "Sets the width of the Window.",
    },
    onClose: {
      action: "onClose",
      description:
        "Fires when the Close button in the title is clicked or when the Esc button is pressed.",
    },
    onMove: {
      action: "onMove",
      description: "Fires when the Window is moved.",
    },
    onResize: {
      action: "onResize",
      description: "Fires when the Window is resized.",
    },
    onStageChange: {
      action: "onStageChange",
      description: "Fires when the stage of the Window is changed.",
    },
  },
} as Meta;

export const Default = (args: WindowProps): JSX.Element => {
  const [visible, setVisible] = React.useState<boolean>(true);

  const toggleDialog = () => {
    setVisible(!visible);
  };

  return (
    <>
      <Button onClick={toggleDialog}>Open Window</Button>
      {visible && (
        <Window {...args} onClose={toggleDialog} initialHeight={350} />
      )}
    </>
  );
};

Default.args = {
  dataTestId: "window-data-testid",
  title: "Default Window",
  height: 200,
  width: 300,
};