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

const meta: Meta<typeof Header> = {
  component: Header,
  tags: ['!autodocs', '!manifest'],
  title: 'Typography/Header/Tests',
};
export default meta;
type Story = StoryObj<HeaderProps>;

const TestComponent = () => (
  <div
    className="p-a-4 text-xs-center font-weight-bold"
    style={{
      backgroundImage: `repeating-linear-gradient(
            -45deg, var(--color-background-neutral), 
            var(--color-background-neutral) 10px, 
            transparent 10px, 
            transparent 20px
          )`,
    }}
  >
    Placeholder component
  </div>
);

const BaseLevelStory: Story = {
  render: (args) => {
    return (
      <>
        {(['legend', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as HeaderProps['as'][]).map((tag) => {
          const Wrapper = tag === 'legend' ? 'fieldset' : 'section';

          return (
            <Wrapper key={tag}>
              <Header
                as={tag}
                level={args.level}
                title={`Showcasing ${args.level} level with tag ${tag}`}
                action={args.action}
              />
              <TestComponent />
            </Wrapper>
          );
        })}
      </>
    );
  },
};

export const GroupTrailingSpace: Story = {
  ...BaseLevelStory,
  args: {
    ...BaseLevelStory.args,
    level: 'group',
  },
};

export const GroupTrailingSpaceWithAction: Story = {
  ...BaseLevelStory,
  args: {
    ...BaseLevelStory.args,
    level: 'group',
    action: { text: 'Action', href: '#target' },
  },
};

export const SectionTrailingSpace: Story = {
  ...BaseLevelStory,
  args: {
    ...BaseLevelStory.args,
    level: 'section',
  },
};

export const SectionTrailingSpaceWithAction: Story = {
  ...BaseLevelStory,
  args: {
    ...BaseLevelStory.args,
    level: 'section',
    action: { text: 'Action', href: '#target' },
  },
};

export const AllVariants: Story = {
  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green', 'rtl'], {
    parameters: {
      padding: '0',
    },
  }),
  render: () => (
    <div
      className="header-variants"
      style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', maxWidth: '1200px' }}
    >
      {(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend'] as const).map((as) => (
        <Header key={as} as={as} title={`Header as ${as}`} />
      ))}
      {(['section', 'group'] as const).map((level) => (
        <Header key={level} level={level} title={`Header level ${level}`} />
      ))}
      <Header
        as="h2"
        title="Header with Action"
        action={{
          'aria-label': 'Action',
          text: 'Action',
          onClick: () => alert('Action clicked!'),
        }}
      />
      <Header
        as="h2"
        title="Header with link"
        action={{
          'aria-label': 'Action',
          text: 'Action',
          href: 'https://wise.com',
        }}
      />
    </div>
  ),
};