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

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

import { PackageListItem } from './package-list-item';

declare let module;

function onPress() {
  Alert.alert('Lorem ipsum', 'dolor sit amet');
}

storiesOf('PackageListItem', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Style Presets', () => (
    <Story>
      <UseCase text="Default" usage="Default use case">
        <PackageListItem barcode={'PACKAGE_BARCODE'} bulletPreset="success" onPress={onPress} />
      </UseCase>
      <UseCase text="Detailed info" usage="With route, route sequence and space">
        <PackageListItem
          barcode={'PACKAGE_BARCODE'}
          bulletPreset="error"
          currentSpace="Space 0"
          retailer="Retailer 0"
          routeSequence="12"
          onPress={onPress}
        />
      </UseCase>
      <UseCase text="With in-warehouse icon" usage="When the package is in the warehouse">
        <PackageListItem
          isInWarehouse
          barcode={'PACKAGE_BARCODE'}
          bulletPreset="warning"
          currentSpace="Space 0"
          retailer="Retailer 0"
          routeSequence="12"
          onPress={onPress}
        />
      </UseCase>
      <UseCase text="With multi-parcel icon" usage="When the package belongs to a multi-parcel">
        <PackageListItem
          hasSiblings
          barcode={'PACKAGE_BARCODE'}
          bulletPreset="primary"
          currentSpace="Space 0"
          retailer="Retailer 0"
          routeSequence="12"
          onPress={onPress}
        />
      </UseCase>
      <UseCase
        text="With in-warehouse and multi-parcel icon"
        usage="When the package is in the warehouse and belongs to a multi-parcel"
      >
        <PackageListItem
          hasSiblings
          isInWarehouse
          barcode={'PACKAGE_BARCODE'}
          bulletPreset="secondary"
          currentSpace="Space 0"
          retailer="Retailer 0"
          routeSequence="12"
          onPress={onPress}
        />
      </UseCase>
    </Story>
  ));
