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

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

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

export const Primary: Story = {
  render: (args) => {
    return (
      <Wrapper {...args}>
        {["vertical", "horizontal"].map((labelAlignment) => (
          <>
            <div className="onvo-grid onvo-grid-cols-3 onvo-gap-2 onvo-w-full onvo-p-4">
              {["start", "center", "end"].map((horizontalAlignment) => (
                <div
                  className="onvo-relative onvo-h-64 onvo-border onvo-border-gray-200"
                  key={horizontalAlignment + labelAlignment}
                >
                  <ChartBase
                    title="Hello World"
                    key={horizontalAlignment + labelAlignment}
                    json={{
                      data: {
                        datasets: [
                          {
                            data: ["200"],
                            label: "Companies",
                          },
                        ],
                      },
                      type: "metric",
                      options: {
                        layout: {
                          padding: {
                            top: 30,
                            bottom: 30,
                            left: 30,
                            right: 30,
                          },
                        },
                        plugins: {
                          title: {
                            text: "Total Number of Companies Invested Under Fund 100",
                            display: true,
                            align: horizontalAlignment,
                          },
                          subtitle: {
                            text: "Total Number of Companies Invested Under Fund 100",
                            display: true,
                            align: horizontalAlignment,
                          },
                          metric: {
                            align: horizontalAlignment,
                            labelPosition: labelAlignment,
                          },
                          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" },
};