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

const withContainer = (Story: any) => (
  <div style={{ display: 'flex', justifyContent: 'center' }}>
    <Story />
  </div>
);

/**
 * Not all stories need access to all controls as it causes unnecessary UI noise.
 */
const hideControls = (args: string[]) =>
  Object.fromEntries(args.map((item) => [item, { table: { disable: true } }]));

/**
 * The stories below document the `Header` component, which is used to structure content and convey hierarchy. <br />
 * For more details, refer to the [design documentation](https://wise.design/components/section-header).
 */
const meta: Meta<typeof Header> = {
  component: Header,
  title: 'Typography/Header',
  argTypes: {
    level: {
      type: {
        name: 'enum',
        value: ['section', 'group'],
      },
      table: {
        type: {
          summary: 'HeaderLevel',
        },
      },
      description: 'Defines the hierarchical level of the header.',
    },
    as: {
      type: {
        name: 'enum',
        value: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend'],
      },
      table: {
        type: {
          summary: 'HeaderAs',
        },
      },
      description:
        'Defines which HTML element the Header will render as. Use `legend` only as the first child of a `<fieldset>` — otherwise a warning will appear. The `action` prop is not supported with `legend`. You can also use heading tags like `h1`, `h2`, `h3`, or `header`.',
    },
    action: {
      table: {
        type: {
          summary: 'HeaderAction',
        },
      },
      description: 'Defines an optional action (e.g., button or link) associated with the header.',
    },
  },
  args: {
    title: 'Default Header',
    level: 'group',
    as: 'h1',
    action: undefined,
  },
  tags: ['autodocs'],
  decorators: [withContainer],
};

export default meta;

type Story = StoryObj<typeof Header>;

export const Playground: Story = {
  args: {
    title: 'Playground Header',
    level: 'group',
    as: 'h2',
    action: {
      'aria-label': 'Action',
      text: 'Click me',
      onClick: () => alert('Action clicked!'),
      disabled: false,
    },
  },
};

/**
 * Demonstrates a `Header` with an associated action.
 */
export const Action: Story = {
  args: {
    title: 'Header with Action',
    action: {
      'aria-label': 'Action',
      text: 'Action',
      onClick: () => alert('Action clicked!'),
    },
  },
  argTypes: hideControls(['as', 'className', 'level', 'title', 'testId']),
};

/**
 * Demonstrates a `Header` with an associated action as a link.
 */
export const ActionAsLink: Story = {
  args: {
    title: 'Header with Action as Link',
    action: {
      'aria-label': 'Learn more about this section',
      text: 'Learn more',
      href: 'https://wise.com',
      target: '_blank',
    },
  },
  argTypes: hideControls(['as', 'className', 'level', 'title', 'testId']),
};

export const DisabledAction: Story = {
  args: {
    title: 'Header with Disabled Action',
    action: {
      'aria-label': 'Disabled action',
      text: 'Disabled Action',
      onClick: () => alert('This should not fire!'),
      disabled: true,
    },
  },
  argTypes: hideControls(['as', 'className', 'level', 'title', 'testId']),
};

/**
 * Demonstrates a `Header` rendered as a custom HTML element.
 */
export const CustomElement: Story = {
  render: (args) => (
    <fieldset style={{ width: '100%' }}>
      <Header {...args} />
    </fieldset>
  ),
  args: {
    title: 'Legend Header',
    as: 'legend',
  },
  argTypes: hideControls(['action', 'className', 'level', 'testId']),
};

/**
 * Demonstrates a `Header` with a specific hierarchical level.
 */
export const SectionLevel: Story = {
  args: {
    title: 'Section Header',
    level: 'section',
  },
  argTypes: hideControls(['action', 'as', 'className', 'title', 'testId']),
};