import { Meta, Story } from '@storybook/addon-docs';
import { FpCaptcha } from "../../FpCaptcha";

<Meta
  title='FpCaptcha'
  component={FpCaptcha}
  argTypes={{
    onPassed: { table: { disable: true }, action: 'passed' },
    onClose: { table: { disable: true }, action: 'closed' },
    onFailed: { table: { disable: true }, action: 'failed' },
    options: { table: { disable: true } },
    apiUrl: { control: { type: 'text' } }
  }} />

export const Template = (args) => (
  <FpCaptcha
    {...args}
    options={{ config: { apiUrl: args.apiUrl } }} />
)

# FpCaptcha

<Story name='Basic' args={{
  visible: false,
  options: { config: {apiUrl: process.env.CAPTCHA_SERVICE_API_URL}}
}}>
  {Template.bind({})}
</Story>

## Code sample

```tsx
import { FpCaptcha } from "@funpodium/fp-captcha-client-react-sdk";

function App() {
    return (
        <FpCaptcha
          challengeId={'[challenge id]'}
          visible={false} />
    )
}
```

## Arguments

### visible

### challengeId

### onPassed

```ts
const handleOnPassed = () => { /* do something */ }
````

### onRejected

```ts
const handleOnRejected = (reason: FpCaptchaJudgementResult) => { /* do something */ }
````

### children

```tsx
<FpCaptcha>
    {
        (result: FpCaptchaJudgementResult) => {
            return (<p>Display something</p>)
        }
    }
</FpCaptcha>
```

### options

```tsx
type FpCaptchaExtendedOptions = {
    forcedLocale: 'en-US', // _default_ undefined
    config: {
        apiUrl: string; // set the url for fpCaptcha API endpoint
        chunkSize: number; // set the decipher chunk size ⚠️
        dragThreshold: number; // set the drag area threshold ⚠️
    }
}
```
