import React from 'react'
import { storiesOf } from '@storybook/react'
import { ManageSubscriptionPage } from 'presets/Subscription'
import {
  item,
  ShippingAddressCardList,
  paymentInformationCardList,
} from './fixture'

const handleBuyNow = changeArgs => {
  console.log('[Handler] handlebuyNow', changeArgs)
}
const handleSaveSubscription = changeArgs => {
  console.log('[Handler] handleSaveSubscription', changeArgs)
}
const handleSkip = changeArgs => {
  console.log('[Handler] handleSkip', changeArgs)
}
const handleCancelSubscription = changeArgs => {
  console.log('[Handler] handleCancelSubscription', changeArgs)
}

const handlePaymentCardSave = args => {
  console.log('[Handler] saved payment card details', args.toSerialized())
}

const handleShippingCardSave = args => {
  console.log('[Handler] saved shipping card details', args.toSerialized())
}

storiesOf('presets/Subscription', module).add('ManageSubscriptionPage', () => (
  <ManageSubscriptionPage
    item={item}
    ShippingAddressCardList={ShippingAddressCardList}
    paymentInformationCardList={paymentInformationCardList}
    onBuyNow={handleBuyNow}
    onSaveSubscription={handleSaveSubscription}
    onSkip={handleSkip}
    onCancelSubscription={handleCancelSubscription}
    onPaymentCardSave={handlePaymentCardSave}
    onShippingCardSave={handleShippingCardSave}
  />
))