import { Canvas, Meta, Story } from '@storybook/addon-docs'
import { Demo } from './Demo'

<Meta
  title='Demo'
  argTypes={{
    onPassed: { table: { disable: true }, action: 'passed' },
    onFailed: { table: { disable: true }, action: 'failed' },
    environment: {
      options: ['Stage', 'Soft Launch'],
      control: {
        type: 'select',
        labels: {
          Stage: 'Stage',
          'Soft Launch': 'Soft Launch'
        }
      },
      mapping: {
        Stage: {
          captchaServiceApiUrl: process.env.STAGE_CAPTCHA_SERVICE_API_URL,
          backendApiUrl: process.env.STAGE_BACKEND_API_URL
        },
        'Soft Launch': {
          captchaServiceApiUrl: process.env.SOFT_LAUNCH_CAPTCHA_SERVICE_API_URL,
          backendApiUrl: process.env.SOFT_LAUNCH_BACKEND_API_URL
        }
      }
    }
  }} />

export const Template = (args) => (
  <>
    <Demo {...args} {...args.environment} />
  </>
)

# Demo

<Canvas>
  <Story name='Demo' args={{ environment: 'Stage' }}>
    {Template.bind({})}
  </Story>
</Canvas>