import React from "react";
import { Meta, StoryObj } from "@storybook/react-webpack5";
import { DashboardList } from "./DashboardList";
import { Wrapper } from "../Wrapper/Wrapper";

const meta: Meta<typeof DashboardList> = {
  component: DashboardList,
  title: "Layouts/Dashboard List",
  argTypes: {
    variant: {
      options: ["grid", "list"],
      control: { type: "radio" },
    },
    theme: {
      options: ["dark", "light", "system"],
      control: { type: "radio" },
    },
    layout: {
      options: ["default", "sidebar", "tabs"],
      control: { type: "radio" },
    },
  },
};
export default meta;

type Story = StoryObj<{
  token: string;
  baseUrl: string;
  variant: "grid" | "list";
  theme: "dark" | "light" | "system";
  layout: "default" | "sidebar" | "tabs";
  title: string;
}>;

export const Default: Story = {
  render: (args) => {
    return (
      <Wrapper
        token={args.token}
        baseUrl={args.baseUrl}
      >
        <div className="onvo-h-[calc(100vh-100px)] onvo-w-[calc(100vw-100px)] onvo-mt-[50px] onvo-ml-[50px] onvo-rounded-2xl onvo-shadow-2xl overflow-y-auto onvo-overflow-x-hidden">
          <DashboardList
            variant={args.variant}
            theme={args.theme}
            layout={args.layout}
            title={args.title}
          /></div>
      </Wrapper>
    );
  },

  args: {
    token: "eyJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiYXV0aGVudGljYXRlZCIsImFwcF9tZXRhZGF0YSI6eyJkYXNoYm9hcmRzIjpbImYwYzdiZTc0LTQ4OTUtNDUyMi1hOWM5LTcwMmQ4YzUwYjk3ZCIsIjg4NjQwODczLWQwOTgtNDMxNy1hNDZiLWNlYjEzMThhNDMyYiJdLCJwYXJlbnRfdGVhbSI6ImVlNWIwOGM2LTUxNjctNDQyNS1iYmMzLWE3NDZmZTRhN2VhZCJ9LCJzdWIiOiI1ODk5Zjk5ZC1hNDQ5LTRiZmEtODc2OS0xOWMwOTdhYWYxZjYiLCJhdWQiOiJhdXRoZW50aWNhdGVkIiwiaWF0IjoxNzU3NTgzMjg2fQ.t_PYIr2K86liQAJJa4viJhmbMPRHCtGF4NcWXkIGFkw",
    baseUrl: "http://localhost:3004",
    variant: "list",
    theme: "system",
    layout: "sidebar",
    title: "Dashboards",
  },

  parameters: { layout: "fullscreen" },
};