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

export default {
  title: "Design System/Animation/Slide",
  component: Slide,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'Slide Animation \n\n```javascript\nimport { Slide } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    appear: {
      control: { type: "boolean" },
      description:
        "Defines whether a transition should happen on the first mount. Defaults to false.",
    },
    childFactory: {
      control: { type: "any" },
      description:
        "After the element reaches its exit state, it is no longer available in the DOM. If a DOM operation is required, access it trough the childFactory function.",
    },
    className: {
      control: { type: "string" },
      description:
        "Specifies the CSS class names which are set to the Animation.",
    },
    component: {
      control: { type: "string" },
      description:
        "Specifies the node type of the parent Animation. Defaults to div.",
    },
    componentChildClassName: {
      control: { type: "string" },
      description:
        "Specifies the CSS class names which are set to each of the animated children elements.",
    },
    componentChildStyle: {
      control: { type: "any" },
      description:
        "Specifies the styles which are set to each of the animated children elements.",
    },
    direction: {
      control: { type: "string" },
      description:
        "Specifies the direction of the Slide Animation. Defaults to down.",
    },
    enter: {
      control: { type: "boolean" },
      description:
        "Specifies whether to animate the entering (showing) element. Defaults to true.",
    },
    exit: {
      control: { type: "boolean" },
      description:
        "Specifies whether to animate a leaving (disappearing) element. Defaults to true.",
    },
    id: {
      control: { type: "string" },
      description: "Specifies the id of the Animation.",
    },
    mountOnEnter: {
      control: { type: "boolean" },
      description:
        "Specifies if the Animation will use lazy-mounting on the first in={true}. Defaults to false.",
    },
    style: {
      control: { type: "any" },
      description: "Specifies the style of the parent Animation.",
    },
    transitionEnterDuration: {
      control: { type: "number" },
      description:
        "Specifies the duration of the transition for the entering (animation in) Animation. Defaults to 300ms.",
    },
    transitionExitDuration: {
      control: { type: "number" },
      description:
        "Specifies the duration of the transition for the exiting (animation out) Animation. Defaults to 300ms.",
    },
    unmountOnExit: {
      control: { type: "boolean" },
      description:
        "Specifies if the Animation will unmount after it reaches its exited state. Defaults to false.",
    },
    onEnter: {
      control: { type: "function" },
      description:
        "Called when a component is added to an existing Animation component and the Animation has not started yet.",
    },
    onEntered: {
      control: { type: "function" },
      description:
        "Called when a component is added to an existing Animation component and the Animation is now finished.",
    },
    onEntering: {
      control: { type: "function" },
      description:
        "Called when a component is added to an existing Animation component and the Animation is now happening.",
    },
    onExit: {
      control: { type: "function" },
      description:
        "An event that is called after the Animation has reached its exit state.",
    },
    onExited: {
      control: { type: "function" },
      description:
        "An event that is called after the Animation has reached its exited state.",
    },
    onExiting: {
      control: { type: "function" },
      description:
        "An event that is called after the Animation has reached its exiting state.",
    },
  },
} as Meta;

export const Default = (args: SlideProps): JSX.Element => {
  const [show, setShow] = React.useState(true);
  const onClick = () => {
    setShow(!show);
  };
  const children = show ? (
    <div
      style={{
        backgroundColor: "#ccc",
        padding: "0.75rem",
        textAlign: "center",
      }}
    >
      CONTENT
    </div>
  ) : null;
  return (
    <div
      style={{
        height: "8rem",
        width: "10rem",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
      }}
    >
      <Button onClick={onClick}>Slide Animation</Button>
      <Slide {...args}>{children}</Slide>
    </div>
  );
};

Default.args = {
  dataTestId: "slide-data-testid",
  appear: false,
  enter: true,
  exit: true,
};