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

const meta: Meta<typeof TableChart> = {
    component: TableChart,
    title: "Charts/Table Chart",
    argTypes: {},
};
export default meta;

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

const data: Array<{
    id: number
    name: string
    sales: string
    region: string
    status: string
    deltaType: string
    hours: number
}> = [
        {
            id: 1,
            name: "Peter McCrown",
            sales: "1,000,000",
            region: "Region A",
            status: "overperforming",
            deltaType: "moderateIncrease",
            hours: 100,
        },
        {
            id: 2,
            name: "Jon Mueller",
            sales: "2,202,000",
            region: "Region B",
            status: "overperforming",
            deltaType: "moderateIncrease",
            hours: 110,
        },
        {
            id: 3,
            name: "Peter Federer",
            sales: "1,505,000",
            region: "Region C",
            status: "underperforming",
            deltaType: "moderateDecrease",
            hours: 90,
        },
        {
            id: 4,
            name: "Maxime Bujet",
            sales: "500,000",
            region: "Region D",
            status: "overperforming",
            deltaType: "moderateDecrease",
            hours: 92,
        },
        {
            id: 5,
            name: "Emma Nelly",
            sales: "600,000",
            region: "Region E",
            status: "underperforming",
            deltaType: "moderateDecrease",
            hours: 95,
        },
    ]
export const Primary: Story = (args) => {
    return (
        <Wrapper {...args}>
            <>
                <div className="onvo-grid onvo-grid-cols-2 onvo-gap-2 onvo-w-full onvo-p-4">
                    <div className="onvo-relative onvo-h-96 onvo-border onvo-border-gray-200 onvo-p-4 onvo-rounded-2xl">
                        <TableChart
                            stats={{ totalPages: 1 }}
                            pagination={{ currentPage: 1, pageSize: 100 }}
                            setPagination={() => { }}
                            data={{
                                "data": {
                                    "datasets": [
                                        {
                                            "data": data.map(a => a.name),
                                            "label": "Companies"
                                        },
                                        {
                                            "data": data.map(a => a.sales),
                                            "label": "Sales"
                                        },
                                        {
                                            "data": data.map(a => a.hours),
                                            "label": "Hours"
                                        }
                                    ]
                                },
                                "type": "metric",
                                "options": {
                                    "plugins": {
                                        "title": {
                                            "text": "Total Number of Companies Invested Under Fund 100",
                                            "display": true
                                        },
                                        "subtitle": {
                                            "text": "Total Number of Companies Invested Under Fund 100",
                                            "display": true,
                                        },
                                        "datalabels": {
                                            "display": false
                                        }
                                    },
                                    "responsive": true,
                                    "maintainAspectRatio": false
                                }

                            }} /></div>

                </div>
            </>


        </Wrapper>
    );
};




Primary.args = {
    token:
        "eyJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiYXV0aGVudGljYXRlZCIsImFwcF9tZXRhZGF0YSI6eyJkYXNoYm9hcmRzIjpbImFlNWIxZGRlLTFmZjUtNDk2Ny1hZmUxLTYzOWI3NTVjNzEwMiJdLCJwYXJlbnRfdGVhbSI6ImVlNWIwOGM2LTUxNjctNDQyNS1iYmMzLWE3NDZmZTRhN2VhZCJ9LCJzdWIiOiI1ODk5Zjk5ZC1hNDQ5LTRiZmEtODc2OS0xOWMwOTdhYWYxZjYiLCJhdWQiOiJhdXRoZW50aWNhdGVkIiwiaWF0IjoxNzE5MzA3MDgxfQ.230JQNigbv9HOSXms9m-JGKlpGveuD3-_bR3XdqRhEk",
    baseUrl: "http://localhost:3004",
    id: "ae5b1dde-1ff5-4967-afe1-639b755c7102",
};

Primary.parameters = { layout: "fullscreen" };