import type { Decorator, Meta, StoryObj } from "@storybook/react";

import { ThemeProviderWithStyledEngine, NumberField } from "../index";
import { type ComponentProps } from "react";

const disabled = {
  table: {
    disable: true,
  },
};

const decorator: Decorator<unknown> = (Story) => (
  <ThemeProviderWithStyledEngine>{Story()}</ThemeProviderWithStyledEngine>
);

type CustomArgs = ComponentProps<typeof NumberField> &
  Pick<
    Intl.NumberFormatOptions,
    "currency" | "minimumFractionDigits" | "maximumFractionDigits"
  >;

const meta = {
  title: "Components/Inputs/NumberField",
  component: NumberField,
  argTypes: {
    label: { type: "string" },
    defaultValue: { type: "string" },
    locale: {
      type: "string",
      options: ["en", "nl"],
      control: {
        type: "select",
      },
    },
    tooltip: { type: "string" },
    style: {
      type: "string",
      options: ["decimal", "currency"],
      control: { type: "select" },
    },
    currency: {
      type: "string",
      options: ["None", "EUR", "USD", "GBP"],
      control: { type: "select" },
    },
    minimumFractionDigits: { type: "number", min: 0, max: 20 },
    maximumFractionDigits: { type: "number", min: 0, max: 20 },
    value: disabled,
    onChange: disabled,
    ESCAPE_className: disabled,
    tooltipProps: disabled,
  },
  decorators: [decorator],
} satisfies Meta<CustomArgs>;

export default meta;
type Story = StoryObj<CustomArgs>;

export const Default: Story = {
  render: ({
    currency,
    minimumFractionDigits,
    maximumFractionDigits,
    ...args
  }) => (
    <NumberField
      formatOptions={{
        style: currency === "None" ? "decimal" : "currency",
        currency: currency === "None" ? undefined : currency,
        minimumFractionDigits,
        maximumFractionDigits,
      }}
      {...args}
    />
  ),
  args: {
    locale: "nl",
    variant: "outlined",
    fullWidth: true,
    label: "Birthday",
    required: false,
    error: false,
    errorText: "It's wrong",
    disabled: false,
    height: "40",
    min: "0",
    max: "1000000",
    clearButton: true,
    currency: "None",
  },
};
