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 = {
  render: (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>
    );
  },

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

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