import React from 'react'
import { type Meta } from '@storybook/react-vite'

import { getApiUrlPrefix } from '../../services/apiEndpointHelpers'
import { DocsTemplate } from '../../../.storybook'

export const Example = (): React.JSX.Element => {
  const apiUrl = getApiUrlPrefix()
  const customBackendUrl = getApiUrlPrefix('custom-backend')

  // Example with custom configuration
  const customMappingUrl = getApiUrlPrefix('api', {
    customMappings: {
      development: '/local-{backend}',
      production: '/prod-{backend}',
    },
  })

  // Example with environment override
  const overrideUrl = getApiUrlPrefix('service', {
    customEnvironmentName: 'development',
  })

  return (
    <div>
      <p>
        Default backend URL prefix: <strong>{apiUrl}</strong>
      </p>
      <p>
        Custom backend URL prefix: <strong>{customBackendUrl}</strong>
      </p>
      <p>
        Custom mapping example: <strong>{customMappingUrl}</strong>
      </p>
      <p>
        Environment override example: <strong>{overrideUrl}</strong>
      </p>
    </div>
  )
}
Example.storyName = 'getApiUrlPrefix'

export default {
  title: 'Helper Functions/getApiUrlPrefix',
  component: Example,
  parameters: {
    viewMode: 'docs',
    previewTabs: {
      canvas: { hidden: true },
    },
    docs: {
      page: () => (
        <>
          <DocsTemplate
            code={`import { getApiUrlPrefix } from '@patterninc/react-ui'

// Default usage (uses 'server' as default backend)
const apiUrl = getApiUrlPrefix()
console.log(apiUrl) // Output: '/server', '/staging-server', or '/demo-server'

// Custom backend usage
const customUrl = getApiUrlPrefix('custom-backend')
console.log(customUrl) // Output: '/custom-backend', '/staging-custom-backend', or '/demo-custom-backend'

// Custom URL mapping for specific environments
const customMappingUrl = getApiUrlPrefix('api', {
  customMappings: {
    'development': '/local-{backend}',
    'production': '/prod-{backend}'
  }
})

// Override detected environment
const overrideUrl = getApiUrlPrefix('service', {
  customEnvironmentName: 'development'
})

// Custom environment detection with URL mapping
const advancedUrl = getApiUrlPrefix('api', {
  environmentConfig: {
    customDetectors: [
      {
        name: 'development',
        matcher: (hostname) => hostname.includes('my-dev.com')
      }
    ],
    fallbackEnvironment: 'production'
  },
  customMappings: {
    'development': '/dev-{backend}'
  }
})`}
            description='A flexible utility function that generates environment-aware API URL prefixes for different backend services. It automatically adjusts the URL prefix based on the current environment and supports extensive customization options for one-off cases without modifying the core library.'
            infoBullets={[
              <span key='core-functionality'>
                Core features:
                <ul>
                  <li>
                    Automatically generates appropriate URL prefixes based on
                    the current environment
                  </li>
                  <li>
                    Supports custom backend service names via optional parameter
                  </li>
                  <li>
                    Integrates with local storage for development overrides
                  </li>
                  <li>
                    Extensive configuration options for custom URL patterns and
                    environment detection
                  </li>
                </ul>
              </span>,
              <span key='url-patterns'>
                Default URL prefix patterns by environment:
                <ul>
                  <li>
                    <code>development</code>: Returns{' '}
                    <code>/staging-{`{backendName}`}</code>
                  </li>
                  <li>
                    <code>stage</code>: Returns{' '}
                    <code>/staging-{`{backendName}`}</code>
                  </li>
                  <li>
                    <code>demo</code>: Returns{' '}
                    <code>/demo-{`{backendName}`}</code>
                  </li>
                  <li>
                    <code>production</code>: Returns{' '}
                    <code>/{`{backendName}`}</code>
                  </li>
                </ul>
              </span>,
              <span key='configuration-options'>
                Configuration options:
                <ul>
                  <li>
                    <code>customMappings</code>: Override URL patterns for
                    specific environments using <code>{`{backend}`}</code>{' '}
                    placeholder
                  </li>
                  <li>
                    <code>customEnvironmentName</code>: Force a specific
                    environment regardless of detection
                  </li>
                  <li>
                    <code>environmentConfig</code>: Pass custom environment
                    detection logic and fallback settings
                  </li>
                </ul>
              </span>,
              <span key='local-override'>
                Development features:
                <ul>
                  <li>
                    Supports local backend override through localStorage using
                    key <code>localBackendOverride:{`{backendName}`}</code>
                  </li>
                  <li>Default backend name is 'server' if not specified</li>
                  <li>
                    Custom detectors and mappings ideal for temporary
                    environments or one-off cases
                  </li>
                  <li>
                    Backward compatible - existing code continues to work
                    unchanged
                  </li>
                </ul>
              </span>,
              <span key='use-cases'>
                Common use cases:
                <ul>
                  <li>Configuring API endpoints for different microservices</li>
                  <li>
                    Managing multiple backend services in a single application
                  </li>
                  <li>Local development with custom API endpoints</li>
                  <li>Environment-specific API routing</li>
                  <li>Temporary environments without modifying core library</li>
                  <li>Testing with forced environment configurations</li>
                </ul>
              </span>,
            ]}
          />
        </>
      ),
    },
  },
} as Meta<typeof Example>