import { Meta } from "@storybook/react";
import { DialogProps } from "./DialogProps";
import Dialog from "./Dialog";
import React from "react";
import { DialogActionsBar } from "@progress/kendo-react-dialogs";
import Button from "@/components/Buttons/Button/Button";

export default {
  title: "Design System/Dialogs/Dialog",
  component: Dialog,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact Dialog communicates specific information and prompts users to take specific actions by interacting with a modal dialog. \n\n```javascript\nimport { Dialog } 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 Dialog will be appended.",
    },
    autoFocus: {
      control: { type: "boolean" },
      description:
        "Indicates whether the Dialog will be focused automatically.",
    },
    className: {
      control: { type: "text" },
      description: "Sets additional CSS classes to the Dialog.",
    },
    closeIcon: {
      control: { type: "boolean" },
      description: "Specifies whether the close icon will be displayed.",
    },
    contentStyle: {
      control: { type: "object" },
      description: "Sets additional CSS styles to the content of the Dialog.",
    },
    dir: {
      control: { type: "text" },
      description: "Represents the dir HTML attribute.",
    },
    height: {
      control: { type: "text" },
      description: "Specifies the height of the Dialog.",
    },
    id: {
      control: { type: "text" },
      description: "Sets the id of the Dialog.",
    },
    minWidth: {
      control: { type: "text" },
      description: "Specifies the minimum width of the Dialog.",
    },
    style: {
      control: { type: "object" },
      description: "Sets additional CSS styles to the Dialog.",
    },
    themeColor: {
      control: { type: "select", options: ["dark", "light", "primary"] },
      description: "Specifies the theme color of the Dialog.",
    },
    title: {
      control: { type: "text" },
      description: "Specifies the title of the Dialog.",
    },
    width: {
      control: { type: "text" },
      description: "Specifies the width of the Dialog.",
    },
    onClose: {
      action: "onClose",
      description: "Fires when the Dialog is about to be closed.",
    },
  },
} as Meta;

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

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

  return (
    <div>
      <Button onClick={toggleDialog}>Open Dialog</Button>
      {visible && (
        <Dialog {...args} onClose={toggleDialog}>
          <p style={{ margin: "25px", textAlign: "center" }}>
            Are you sure you want to continue?
          </p>
          <DialogActionsBar>
            <Button onClick={toggleDialog}>No</Button>
            <Button onClick={toggleDialog}>Yes</Button>
          </DialogActionsBar>
        </Dialog>
      )}
    </div>
  );
};
Default.args = {
  dataTestId: "dialog-data-testid",
  autoFocus: true,
  closeIcon: true,
  height: "200px",
  width: "400px",
  title: "Dialog Title",
  themeColor: "light",
};