import type { Meta, StoryObj } from '@storybook/react-webpack5';
import Divider from './Divider';

/**
 * Wraps stories with a container (e.g., centered or padded).
 * Adjust styles to your needs.
 */
const withContainer = (Story: any) => (
  <div style={{ padding: '1rem' }}>
    <Story />
  </div>
);

/**
 * Not all stories need access to all controls as it causes unnecessary UI noise.
 */
const hideControls = (args: string[]) => {
  const hidden = ['level', 'as', 'className', 'testId', ...args];

  return Object.fromEntries(hidden.map((item) => [item, { table: { disable: true } }]));
};

/**
 * The stories below document the `<Divider />` component, which can be rendered as either a semantic `<hr>` or a non-semantic `<div>`.
 * levels allow customization for different visual separation needs.
 *
 * For more details, please refer to the [design documentation](https://wise.design/components/divider).
 */
const meta: Meta<typeof Divider> = {
  component: Divider,
  title: 'Layouts/Divider',

  decorators: [withContainer],
  parameters: {
    actions: { argTypesRegex: null },
  },
  argTypes: {
    level: {
      control: 'select',
      options: ['section', 'subsection', 'content'],
      description: 'Choose the Divider level.',
      table: {
        category: 'Appearance',
        type: { summary: 'string' },
        defaultValue: { summary: 'section' },
      },
    },
    isContent: {
      control: 'boolean',
      description: 'Render as a semantic <hr> (true) or non-semantic <div> (false).',
      table: {
        category: 'Appearance',
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
    className: {
      description: 'Add custom class names to the Divider.',
      table: {
        category: 'Appearance',
        type: { summary: 'string' },
      },
    },
    testId: {
      description: 'Add a data-testid attribute for testing.',
      table: {
        category: 'Testing',
        type: { summary: 'string' },
      },
    },
  },
  args: {
    isContent: false,
    className: '',
    testId: '',
    level: 'section',
  },
};
export default meta;

type Story = StoryObj<typeof Divider>;

export const Playground: Story = {
  args: {
    level: 'section',
  },
};

/**
 * There are three different types of divider – `section`, `subsection`, and `content` –
 * each designed to visually separate or group content. <br />
 * [Design documentation](https://wise.design/components/divider)
 */
export const Level: Story = {
  argTypes: {
    ...hideControls(['testId', 'className', 'isContent']),
  },
  args: {
    level: 'section',
  },
};

/**
 * The `isContent` prop determines whether the divider is rendered as a semantic `<hr>` or a non-semantic `<div>`.
 */
export const ContentDivider: Story = {
  argTypes: {
    ...hideControls(['level', 'testId', 'className']),
  },
  args: {
    isContent: true,
  },
};

export const AllVariants: Story = {
  render: function Render() {
    return (
      <>
        <Divider level="section" />
        <Divider level="subsection" />
        <Divider level="content" />
      </>
    );
  },
  argTypes: {
    ...hideControls(['level', 'testId', 'className', 'isContent']),
  },
};