import type { Meta, StoryObj } from "@storybook/react";
import type { MaskedFieldProps } from ".";
import { MaskedField } from ".";
import { excludeControls } from "../../utils";

const commaSeparatedNumberMask = {
  mask: Number,
  thousandsSeparator: ",",
  scale: 0,
  signed: false,
};

const usPhoneNumberMask = {
  mask: "(000) 000-0000",
};

type StoryType = StoryObj<typeof MaskedField>;

const meta: Meta<typeof MaskedField> = {
  title: "Forms/MaskedField",
  component: MaskedField,
  argTypes: excludeControls("className"),
};

export const PhoneNumber: StoryType = {
  render: (args: MaskedFieldProps) => (
    <MaskedField
      {...args}
      mask={usPhoneNumberMask}
      placeholder="Enter phone number"
      label="Phone Number"
    />
  ),
  args: {
    mask: usPhoneNumberMask,
  },
};

export const CommaSeparatedNumber: StoryType = {
  render: (args: MaskedFieldProps) => (
    <MaskedField
      {...args}
      mask={commaSeparatedNumberMask}
      placeholder="Enter number"
      label="Number"
    />
  ),
  args: {
    mask: commaSeparatedNumberMask,
  },
};

export default meta;
