import React from "react";
import { Stepper } from "../components/Stepper";
import { fn } from "@storybook/test";
import InfoIcon from "@mui/icons-material/InfoOutlined";
import ErrorIcon from "@mui/icons-material/ErrorOutline";

export default {
  title: "Components/Stepper",
  component: Stepper,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
  },
  argTypes: {
    variant: {
      options: ["default", "progress"],
      control: { type: "radio" },
    },
    orientation: {
      options: ["horizontal", "vertical"],
      control: { type: "radio" },
    },
    width: {
      description: "Width of the Stepper",
      table: {
        defaultValue: { summary: "100%" },
        type: { summary: "string" },
      },
      control: {
        type: "text",
      },
    },
    statusConfig: {
      description: "Status configuration for the Stepper",
      table: {
        defaultValue: { summary: null },
        type: { summary: "object" },
      },
      control: {
        type: "object",
      },
    }
  },
  //   argTypes: {
  //     variant: {
  //       options: ["success", "info", "warning", "error"],
  //       control: { type: "radio" },
  //     },
  //     iaFallback: {
  //       options: ["v3", "v2", "mui"],
  //       control: { type: "radio" },
  //     },
  //   },
  //   args: {
  //     onClose: fn(),
  //     onAction: fn(),
  //   },
};

export const Default = {
  args: {
    activeStep: 3,
    steps: [
      {
        label: "Select campaign settings",
        statusConfig: {
          label: "Error State",
          color: "error",
          icon: <ErrorIcon />,
        },
      },
      {
        label: "Create an ad group 1",
        statusConfig: {
          label: "Pending",
          color: "warning",
          icon: <InfoIcon />,
        },
      },
      // {
      //   label: "Create an ad group 2",
      //   statusConfig: {
      //     label: "Pending",
      //     color: "warning",
      //     icon: <InfoIcon />,
      //   },
      // },
      // {
      //   label: "Create an ad group 3",
      //   statusConfig: {
      //     label: "Pending",
      //     color: "warning",
      //     icon: <InfoIcon />,
      //   },
      //   },
      // {
      //   label: "Create an ad 4",
      //   statusConfig: {
      //     label: "Pending",
      //     color: "warning",
      //     icon: <InfoIcon />,
      //   },
      // },
    ],
    orientation: "horizontal",
    variant: "default",
    handleStep: () => {},
  },
};

export const VerticalStepper = {
  args: {
    activeStep: 3,
    steps: [
      {
        label: "Select campaign settings",
        description: "Step 1 description",
      },
      {
        label: "Create an ad group1",
        description: "",
      },
      {
        label: "Create an ad group2",
        description: "create an ad group2",
      },
      {
        label: "Create an ad group3",
        description: "create an ad group3",
      },
      {
        label: "Create an ad",
        description: "",
      },
    ],
    orientation: "vertical",
    variant: "default",
    handleStep: () => {},
  },
};

// export const V2 = {
//   args: {
//     variant: "success",
//     title: "This is a title",
//     iaFallback: "v2",
//   },
// };

// export const Mui = {
//   args: {
//     variant: "success",
//     children: <AlertTitle>Body using AlertTitle from Mui</AlertTitle>,
//     actionName: "",
//     iaFallback: "mui",
//     actionButtonProps: {},
//   },
// };
