<script
  context="module"
  lang="ts"
>
  import { defineMeta } from '@storybook/addon-svelte-csf';
  import type { KcPageStoryProps } from '../KcPageStory';
  import KcPageStory from '../KcPageStory.svelte';

  // Mock kcContext to simulate real environment
  const mockKcContext = {
    url: {
      oauthAction: '/oauth-action',
    },
    oauth: {
      clientScopesRequested: [
        { consentScreenText: 'Scope1', dynamicScopeParameter: 'dynamicScope1' },
        { consentScreenText: 'Scope2' },
      ],
      code: 'mockCode',
    },
    client: {
      attributes: {
        policyUri: 'https://twitter.com/en/tos',
        tosUri: 'https://twitter.com/en/privacy',
      },
      name: 'Twitter',
      clientId: 'twitter-client-id',
    },
  };

  const args: KcPageStoryProps = { pageId: 'login-oauth-grant.ftl' };
  const { Story } = defineMeta({
    title: 'login/login-oauth-grant.ftl',
    component: KcPageStory,
    args: args,
  });
</script>

<!-- /**
 * Default:
 * - Purpose: Tests the default behavior with meaningful logo (Twitter).
 * - Scenario: The component renders with Twitter as the client, displaying its logo, policy, and terms of service links.
 * - Key Aspect: Ensures the component works with a realistic `logoUri` and client name.
 */ -->
<Story
  name="Default"
  args={{
    ...args,
    kcContext: mockKcContext,
  }}
/>

<!-- /**
 * WithoutScopes:
 * - Purpose: Tests the component when no OAuth scopes are requested.
 * - Scenario: The component renders with no scopes listed under the consent screen.
 * - Key Aspect: Ensures the component renders correctly when there are no requested scopes.
 */ -->
<Story
  name="WithoutScopes"
  args={{
    ...args,
    kcContext: {
      ...mockKcContext,
      oauth: {
        ...mockKcContext.oauth,
        clientScopesRequested: [],
      },
    },
  }}
/>

<!-- /**
 * WithFormSubmissionError:
 * - Purpose: Tests how the component handles form submission errors.
 * - Scenario: The `oauthAction` URL is set to an error route and an error message is displayed.
 * - Key Aspect: Ensures that the component can display error messages when form submission fails.
 */ -->
<Story
  name="WithFormSubmissionError"
  args={{
    ...args,
    kcContext: {
      ...mockKcContext,
      url: {
        oauthAction: '/error',
      },
      message: {
        type: 'error',
        summary: 'An error occurred during form submission.',
      },
    },
  }}
/>
