import React from "react";
import type { Meta, StoryObj } from "@storybook/react";
import { DrilldownModal, useDrilldownModal } from "./DrilldownModal";
import { Wrapper } from "../../layouts/Wrapper";
import { DashboardWrapper } from "../../layouts/Dashboard";
import { Button } from "../../tremor/Button";
import { Widget } from "@onvo-ai/js";

const meta: Meta<typeof DrilldownModal> = {
    title: "Components/Drilldown Modal",
    component: DrilldownModal,
    parameters: {
        layout: "centered",
    },
    tags: ["autodocs"],
};

export default meta;
type Story = StoryObj<{
    token: string;
    baseUrl: string;
    id: string;
}>;

const DrilldownModalExample = () => {
    const { setOpen } = useDrilldownModal();

    return (
        <div>
            <Button onClick={() => setOpen(true, "ae5b1dde-1ff5-4967-afe1-639b755c7102")}>
                Open Drilldown Modal
            </Button>
            <DrilldownModal />
        </div>
    );
};

export const Primary: Story = {
    render: (args) => (
        <Wrapper {...args}>
            <DashboardWrapper id={args.id}>
                <DrilldownModalExample />
            </DashboardWrapper>
        </Wrapper>
    ),
    args: {
        token:
            "eyJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiYXV0aGVudGljYXRlZCIsImFwcF9tZXRhZGF0YSI6eyJkYXNoYm9hcmRzIjpbImFlNWIxZGRlLTFmZjUtNDk2Ny1hZmUxLTYzOWI3NTVjNzEwMiJdLCJwYXJlbnRfdGVhbSI6ImVlNWIwOGM2LTUxNjctNDQyNS1iYmMzLWE3NDZmZTRhN2VhZCJ9LCJzdWIiOiI1ODk5Zjk5ZC1hNDQ5LTRiZmEtODc2OS0xOWMwOTdhYWYxZjYiLCJhdWQiOiJhdXRoZW50aWNhdGVkIiwiaWF0IjoxNzE5MzA3MDgxfQ.230JQNigbv9HOSXms9m-JGKlpGveuD3-_bR3XdqRhEk",
        baseUrl: "http://localhost:3004",
        id: "ae5b1dde-1ff5-4967-afe1-639b755c7102",
    },
};