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

const meta: Meta<typeof Header> = {
  component: Header,
  tags: ['!autodocs'],
  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 generateLevelStory = (level: HeaderProps['level'], withAction = false) => {
  return {
    render: () => {
      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={level}
                  title={`Showcasing ${level} level with tag ${tag}`}
                  action={withAction ? { text: 'Action', href: '#target' } : undefined}
                />
                <TestComponent />
              </Wrapper>
            );
          })}
        </>
      );
    },
  };
};

/**
 * Helper to generate variants for `AllVariants` story.
 */
const renderVariants = () => (
  <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>
);

export const GroupTrailingSpace: Story = generateLevelStory('group');
export const GroupTrailingSpaceWithAction: Story = generateLevelStory('group', true);
export const SectionTrailingSpace: Story = generateLevelStory('section');
export const SectionTrailingSpaceWithAction: Story = generateLevelStory('section', true);

export const AllVariants = storyConfig(
  {
    parameters: {
      padding: '0',
    },
    render: renderVariants,
  },
  { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
);
