import type { Meta, StoryObj } from "@storybook/react";
import { excludeControls } from "../../utils";
import { StoryContainer } from "../../utils/StoryContainer";
import { TextField } from "../TextField";
import type { FieldsetProps } from "./Fieldset";
import { Fieldset } from "./Fieldset";

type StoryType = StoryObj<typeof Fieldset>;

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

export const Default: StoryType = {
  render: (args: FieldsetProps) => (
    <Fieldset {...args}>
      <TextField label="Full name" />
      <TextField label="Street" />
      <TextField label="Number" />
      <TextField label="City" />
      <TextField label="Postcode" />
    </Fieldset>
  ),
  args: {
    legend: "",
  },
  decorators: [
    Story => (
      <StoryContainer>
        <Story />
      </StoryContainer>
    ),
  ],
};

export const WithLegend: StoryType = {
  render: (args: FieldsetProps) => (
    <Fieldset {...args}>
      <TextField label="Full name" />
      <TextField label="Street" />
      <TextField label="Number" />
      <TextField label="City" />
      <TextField label="Postcode" />
    </Fieldset>
  ),
  args: {
    legend: "Contact Details",
  },
};

export default meta;
