import { Meta } from "@storybook/react";
import { StepperProps } from "./StepperProps";
import { StepperFocusEvent as KendoStepperFocusEvent } from "@progress/kendo-react-layout";
import Stepper from "./Stepper";
import React from "react";

const items = [
  {
    label: "Cart",
    icon: "k-i-cart",
  },
  {
    label: "Delivery Address",
    icon: "k-i-marker-pin-target",
  },
  {
    label: "Payment Method",
    icon: "k-i-dollar",
  },
  {
    label: "Preview",
    icon: "k-i-preview",
    optional: true,
  },
  {
    label: "Finish Order",
    icon: "k-i-track-changes-accept",
  },
];

export default {
  title: "Design System/Layout/Stepper",
  component: Stepper,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact Stepper component enables the user to create a sequence of logical steps that visualizes progress. \n\n```javascript\nimport { Stepper } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    animationDuration: {
      control: { type: "number" },
      description:
        "Sets the duration of the Stepper animation. Defaults to 400ms.",
    },
    children: {
      control: { type: "text" },
      description: "Represents the children that are passed to the Stepper.",
    },
    className: {
      control: { type: "text" },
      description:
        "Specifies a list of CSS classes that will be added to the Stepper element.",
    },
    dir: {
      control: { type: "text" },
      description: "Represents the dir HTML attribute.",
    },
    disabled: {
      control: { type: "boolean" },
      description: "Determines whether the Stepper is disabled.",
    },
    errorIcon: {
      control: { type: "text" },
      description: "Sets the name for the error icon.",
    },
    errorSVGIcon: {
      control: { type: "object" },
      description: "Sets the SVG icon for the error state.",
    },
    item: {
      control: { type: "object" },
      description: "Defines the Step component that will be rendered.",
    },
    items: {
      control: { type: "object" },
      description:
        "The collection of steps that will be rendered in the Stepper.",
    },
    linear: {
      control: { type: "boolean" },
      description: "Determines whether the Stepper is linear.",
    },
    mode: {
      control: { type: "select", options: ["labels", "steps"] },
      description: "Sets the mode of the Stepper.",
    },
    orientation: {
      control: { type: "select", options: ["horizontal", "vertical"] },
      description: "Sets the orientation of the Stepper.",
    },
    style: {
      control: { type: "object" },
      description: "Sets the style of the Stepper.",
    },
    successIcon: {
      control: { type: "text" },
      description: "Sets the name for the success icon.",
    },
    successSVGIcon: {
      control: { type: "object" },
      description: "Sets the SVG icon for the success state.",
    },
    value: {
      control: { type: "number" },
      description: "Sets the value of the Stepper.",
    },
    onChange: {
      control: { type: "function" },
      description: "Fires when the Stepper value is changed.",
    },
    onFocus: {
      control: { type: "function" },
      description: "Fires when the Stepper receives focus.",
    },
  },
} as Meta;

export const Default = (args: StepperProps): JSX.Element => {
  const [value, setValue] = React.useState(0);
  const handleChange = (e: { value: React.SetStateAction<number> }) => {
    setValue(e.value);
  };
  return (
    <Stepper
      value={value}
      onChange={handleChange}
      items={args.items}
      onFocus={function (event: KendoStepperFocusEvent): void {
        throw new Error("Function not implemented.");
      }}
      mode={args.mode}
      orientation={args.orientation}
    />
  );
};

Default.args = {
  dataTestId: "stepper-data-testid",
  mode: "steps",
  orientation: "horizontal",
  items: items,
};