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

const items = [
  {
    title: "Edit Item",
  },
  {
    title: "Add to Favorites",
  },
  {
    title: "Cancel",
  },
];

export default {
  title: "Design System/Layout/ActionSheet",
  component: ActionSheet,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The ActionSheet component allows you to display a predefined set of options in a modal view. It is commonly used to present choices related to an action that the user initiates. \n\n```javascript\nimport { ActionSheet } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    animation: {
      control: { type: "boolean" },
      description:
        "Controls the popup animation. By default, the open and close animations are disabled.",
    },
    animationDuration: {
      control: { type: "number" },
      description:
        "Specifies the duration of the transition for the entering and closing Animation. Defaults to 300ms.",
    },
    children: {
      control: { type: "text" },
      description:
        "Represents the children that are passed to the ActionSheet.",
    },
    className: {
      control: { type: "text" },
      description:
        "The CSS classes that will be rendered on the inner ActionSheet element.",
    },
    expand: {
      control: { type: "boolean" },
      description: "Specifies the state of the ActionSheet.",
    },
    items: {
      control: { type: "object" },
      description:
        "The collection of items that will be rendered in the ActionSheet.",
    },
    navigatable: {
      control: { type: "boolean" },
      description:
        "Specifies if the ActionSheet can be navigatable with keyboard. Defaults to true.",
    },
    navigatableElements: {
      control: { type: "array" },
      description:
        "Specifies the selectors of the navigatable elements inside the templates of the ActionSheet.",
    },
    subTitle: {
      control: { type: "text" },
      description: "Specifies the text that is rendered under the title.",
    },
    tabIndex: {
      control: { type: "number" },
      description: "Specifies the tabIndex of the ActionSheet.",
    },
    title: {
      control: { type: "text" },
      description: "Specifies the text that is rendered as title.",
    },
    onClose: {
      action: "onClose",
      description: "Fires when the modal overlay is clicked.",
    },
    onItemClick: {
      action: "onItemClick",
      description:
        "Deprecated. Fires when an ActionSheet item is clicked. Use onItemSelect event instead.",
    },
    onItemSelect: {
      action: "onItemSelect",
      description: "Fires when an ActionSheet item is clicked.",
    },
    onOverlayClick: {
      action: "onOverlayClick",
      description:
        "Deprecated. Fires when the modal overlay is clicked. Use onClose event instead.",
    },
  },
} as Meta;

export const Default = (args: ActionSheetProps): JSX.Element => {
  const title = "Select item";
  const [open, setOpen] = React.useState(false);
  const openHandler = () => {
    setOpen(true);
  };
  const handleOverlayClick = () => {
    setOpen(false);
  };
  const handleItemClick = () => {
    setOpen(false);
  };

  return (
    <>
      <Button onClick={openHandler}>OPEN ACTION SHEET</Button>
      <ActionSheet
        expand={open}
        title={title}
        items={items}
        onOverlayClick={handleOverlayClick}
        onItemClick={handleItemClick}
      />
    </>
  );
};