import { storiesOf } from '@storybook/react-native';
import * as React from 'react';
import { ViewStyle } from 'react-native';

import { StoryScreen, Story, UseCase } from '~/storybook/views';

import { Scanner } from './scanner';

declare let module;

const STYLE: ViewStyle = { position: 'relative', height: 100 };

storiesOf('Scanner', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Style Presets', () => (
    <Story>
      <UseCase text="HID" usage="Test with hid mode">
        <Scanner mode="hid" onBarcodeDetected={() => null} />
      </UseCase>
      <UseCase text="BLE" usage="Test with ble mode">
        <Scanner mode="ble" onBarcodeDetected={() => null} />
      </UseCase>
      <UseCase text="Camera" usage="Test with camera mode">
        <Scanner mode="camera" style={STYLE} onBarcodeDetected={() => null} />
      </UseCase>
    </Story>
  ));
