import { Meta } from "@storybook/react";
import { FloatingActionButtonProps } from "./FloatingActionButtonProps";
import FloatingActionButton from "./FloatingActionButton";

export default {
  title: "Design System/Buttons/FloatingActionButton",
  component: FloatingActionButton,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'Use the FloatingActionButton component to create a modern and interactive user interface. \n\n```javascript\nimport { FloatingActionButton } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    accessKey: {
      control: { type: "text" },
      description:
        "Specifies the access key for the FloatingActionButton component.",
    },
    align: {
      control: { type: "object" },
      description:
        "Specifies the horizontal and vertical alignment of the FloatingActionButton component.",
    },
    alignOffset: {
      control: { type: "object" },
      description:
        "Specifies the horizontal and vertical offset of the FloatingActionButton component.",
    },
    className: {
      control: { type: "text" },
      description:
        "Specifies additional CSS classes for the FloatingActionButton component.",
    },
    dir: {
      control: { type: "text" },
      description:
        "Defines the direction of the text and the layout of the FloatingActionButton component.",
    },
    disabled: {
      control: { type: "boolean" },
      description:
        "Determines whether the FloatingActionButton component is disabled.",
    },
    icon: {
      control: { type: "text" },
      description:
        "Defines the icon to be displayed in the FloatingActionButton component.",
    },
    id: {
      control: { type: "text" },
      description: "Specifies the ID of the FloatingActionButton component.",
    },
    items: {
      control: { type: "object" },
      description:
        "Defines the items to be displayed in the FloatingActionButton component.",
    },
    modal: {
      control: { type: "boolean" },
      description:
        "Specifies whether the FloatingActionButton component is modal.",
    },
    overlayStyle: {
      control: { type: "object" },
      description:
        "Defines the style of the overlay for the FloatingActionButton component.",
    },
    popupSettings: {
      control: { type: "object" },
      description:
        "Defines the popup settings for the FloatingActionButton component.",
    },
    positionMode: {
      control: { type: "text" },
      description:
        "Defines the position mode for the FloatingActionButton component.",
    },
    rounded: {
      control: { type: "select" },
      description:
        "Specifies whether the FloatingActionButton component is rounded.",
    },
    size: {
      control: { type: "select" },
      description: "Defines the size of the FloatingActionButton component.",
    },
    style: {
      control: { type: "object" },
      description:
        "Specifies the CSS styles for the FloatingActionButton component.",
    },
    svgIcon: {
      control: { type: "text" },
      description:
        "Defines the SVG icon for the FloatingActionButton component.",
    },
    tabIndex: {
      control: { type: "number" },
      description:
        "Specifies the tab index of the FloatingActionButton component.",
    },
    text: {
      control: { type: "text" },
      description: "Defines the text of the FloatingActionButton component.",
    },
    themeColor: {
      control: { type: "select" },
      description:
        "Specifies the theme color for the FloatingActionButton component.",
    },
    onBlur: {
      action: "blurred",
      description:
        "Handles the blur event of the FloatingActionButton component.",
      table: {
        type: {
          summary: "(event: FloatingActionButtonEvent) => void",
        },
      },
    },
    onClick: {
      action: "clicked",
      description:
        "Handles the click event of the FloatingActionButton component.",
      table: {
        type: {
          summary: "(event: FloatingActionButtonEvent) => void",
        },
      },
    },
    onClose: {
      action: "closed",
      description:
        "Handles the close event of the FloatingActionButton component.",
      table: {
        type: {
          summary: "(event: FloatingActionButtonEvent) => void",
        },
      },
    },
    onFocus: {
      action: "focused",
      description:
        "Handles the focus event of the FloatingActionButton component.",
      table: {
        type: {
          summary: "(event: FloatingActionButtonEvent) => void",
        },
      },
    },
    onItemClick: {
      action: "itemClicked",
      description:
        "Handles the item click event of the FloatingActionButton component.",
      table: {
        type: {
          summary: "(event: FloatingActionButtonItemEvent) => void",
        },
      },
    },
    onKeyDown: {
      action: "keyDown",
      description:
        "Handles the key down event of the FloatingActionButton component.",
      table: {
        type: {
          summary: "(event: FloatingActionButtonEvent) => void",
        },
      },
    },
    onOpen: {
      action: "opened",
      description:
        "Handles the open event of the FloatingActionButton component.",
      table: {
        type: {
          summary: "(event: FloatingActionButtonEvent) => void",
        },
      },
    },
  },
} as Meta;

export const Default = (args: FloatingActionButtonProps): JSX.Element => (
  <div style={{ height: "200px", padding: "20px" }}>
    <FloatingActionButton {...args} />
  </div>
);

Default.args = {
  dataTestId: "fab-data-testid",
  id: "fab-data-testid",
  text: "Floating Action Button",
  icon: "plus",
  themeColor: "primary",
  size: "medium",
  rounded: true,
  items: [
    {
      text: "Item 1",
      icon: "plus",
    },
    {
      text: "Item 2",
      icon: "plus",
    },
    {
      text: "Item 3",
      icon: "plus",
    },
  ],
};