import type { Meta, StoryObj } from "@storybook/react";
import { excludeControls } from "../../utils";
import { StoryContainer } from "../../utils/StoryContainer";
import type { NumberFieldProps } from "./NumberField";
import { NumberField } from "./NumberField";

type StoryType = StoryObj<typeof NumberField>;

const meta: Meta<typeof NumberField> = {
  title: "Forms/NumberField",
  component: NumberField,
  argTypes: {
    minValue: {
      control: {
        control: { type: "range" },
        min: 0,
        max: 10,
        step: 1,
      },
    },
    maxValue: {
      control: {
        control: { type: "range" },
        min: 0,
        max: 10,
        step: 1,
      },
    },
    ...excludeControls("value", "validationState"),
  },
  args: {
    minValue: 0,
    maxValue: 100,
    placeholder: "",
    isDisabled: false,
    isReadOnly: false,
  },
  decorators: [
    Story => (
      <StoryContainer>
        <Story />
      </StoryContainer>
    ),
  ],
};

export const Default: StoryType = {
  render: (args: NumberFieldProps) => <NumberField {...args} />,
  args: {
    label: "Number field",
    errorMessage: "",
    step: 10,
    isRequired: false,
    placeholder: "Enter a number",
  },
};

export const LimitedRange: StoryType = {
  render: (args: NumberFieldProps) => <NumberField {...args} />,
  args: {
    label: "Number field",
    minValue: -10,
    maxValue: 10,
    defaultValue: 0,
    errorMessage: "",
    step: 1,
    isRequired: false,
  },
};

export const Valid: StoryType = {
  render: (args: NumberFieldProps) => <NumberField {...args} />,
  args: {
    label: "Number field",
    isInvalid: false,
    defaultValue: 0,
    errorMessage: "",
    step: 1,
    isRequired: false,
  },
};

export const Invalid: StoryType = {
  render: (args: NumberFieldProps) => <NumberField {...args} />,
  args: {
    label: "Number field",
    isInvalid: true,
    errorMessage: "Error message",
    defaultValue: 0,
    step: 1,
    isRequired: false,
  },
};

export const ReadOnly: StoryType = {
  render: (args: NumberFieldProps) => <NumberField {...args} />,
  args: {
    label: "Number field",
    isReadOnly: true,
    defaultValue: 0,
  },
};

export const Disabled: StoryType = {
  render: (args: NumberFieldProps) => <NumberField {...args} />,
  args: {
    label: "Number field",
    isDisabled: true,
    defaultValue: 0,
    errorMessage: "",
    step: 1,
    isRequired: false,
  },
};

export const WithPrefix: StoryType = {
  render: (args: NumberFieldProps) => <NumberField {...args} />,
  args: {
    label: "Number field",
    prefixInside: <span>£</span>,
    defaultValue: 0,
    errorMessage: "",
    step: 1,
    isRequired: false,
  },
};

export default meta;
