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

const meta: Meta<typeof Dashboard> = {
  component: Dashboard,
  title: "Layouts/Dashboard",
  argTypes: {},
};
export default meta;

type Story = StoryObj<{
  token: string;
  baseUrl: string;
  id: string;
  width: number;
  height: number;
  adminMode: boolean;
}>;

export const Embedded: Story = {
  render: (args) => {
    return (
      <div className="onvo-relative onvo-ml-[10vw] onvo-mt-[10vh] onvo-w-[80vw] onvo-h-[80vh] onvo-flex onvo-justify-between onvo-items-center onvo-bg-slate-700">
        <div
          className="onvo-overflow-y-auto onvo-mx-auto onvo-rounded-xl"
          style={{ width: args.width, height: args.height }}
        >
          <Wrapper {...args}>
            <Dashboard id={args.id}></Dashboard>
          </Wrapper>
        </div>
      </div>
    );
  },

  args: {
    token:
      "eyJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiYXV0aGVudGljYXRlZCIsImFwcF9tZXRhZGF0YSI6eyJ0ZWFtIjoiZWU1YjA4YzYtNTE2Ny00NDI1LWJiYzMtYTc0NmZlNGE3ZWFkIn0sInN1YiI6ImVlNWIwOGM2LTUxNjctNDQyNS1iYmMzLWE3NDZmZTRhN2VhZCIsImF1ZCI6ImF1dGhlbnRpY2F0ZWQiLCJpYXQiOjE3NTM3NjEzNzR9.FiS5iZ2Yg0ossN4L_0Q7dWEH7mFvi6hg_JwJm2R5gZs",
    baseUrl: "http://localhost:3004",
    id: "93f5c64c-6f96-4c28-bb54-4a2771969d1a",
    width: 1024,
    height: 600,
  },

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