import { Meta, StoryObj } from "@storybook/nextjs-vite";
import { Loaders } from "./Loaders";
import { fn } from "storybook/test";
import {
  LayoutQuestion,
  LayoutQuestionProps,
} from "@/components/layout/LayoutQuestion/LayoutQuestion";

const layoutQuestionProps: Omit<LayoutQuestionProps, "children"> = {
  headerProps: {
    onBack: fn(),
  },
  title: {
    children: "Создаем портрет твоей второй половинки.",
    align: "center",
  },
  contentProps: {
    className: "pt-5",
  },
  childrenWrapperProps: {
    className: "mt-[57px]",
  },
};

/** Reusable Loaders page Component */
const meta: Meta<typeof Loaders> = {
  title: "Templates/Loaders",
  component: Loaders,
  tags: ["autodocs"],
  parameters: {
    layout: "fullscreen",
  },
  args: {
    circularProgressbarsListProps: {
      progressbarItems: [
        {
          processing: {
            title: { children: "Анализ твоих ответов" },
            text: {
              children: "Processing...",
            },
          },
          completed: {
            title: { children: "Анализ твоих ответов" },
            text: {
              children: "Complete",
            },
          },
        },
        {
          processing: {
            title: { children: "Portrait of the Soulmate" },
            text: {
              children: "Processing...",
            },
          },
          completed: {
            title: { children: "Portrait of the Soulmate" },
            text: {
              children: "Complete",
            },
          },
        },
        {
          processing: {
            title: { children: "Portrait of the Soulmate" },
            text: {
              children: "Processing...",
            },
          },
          completed: {
            title: { children: "Connection Insights" },
            text: {
              children: "Complete",
            },
          },
        },
      ],
      onAnimationEnd: fn(),
    },
    bottomActionButtonProps: {
      actionButtonProps: {
        children: "Continue",
        onClick: fn(),
      },
    },
  },
  argTypes: {
    circularProgressbarsListProps: {
      control: { type: "object" },
    },
    bottomActionButtonProps: {
      control: { type: "object" },
    },
  },
  render: (args) => {
    return (
      <LayoutQuestion {...layoutQuestionProps}>
        <Loaders {...args} />
      </LayoutQuestion>
    );
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Default = {} satisfies Story;
