import backgrounds from '@storybook/addon-backgrounds'
import React from 'react'
import StorybookTheme from 'storybookTheme'
import { storiesOf, action } from '@storybook/react'

import AssetBox from '.'
import StoryWrapper from 'storybookComponents/StoryWrapper'

import AssetImage from './assets/asset-photo.png'

storiesOf('Asset Box', module)
  .addDecorator(backgrounds(StorybookTheme.storiesBackgrounds))
  .addWithInfo(
    'basic usage',
    `
        This is the basic usage of the Asset Box.

        #### Props:
        ---
        - assetData: Object
          - address: string,
          - currentTokenSupply: string,
          - endTerm: string,
          - financingVolume: string,
          - imgSrc: string,
          - interest: string,
          - investedCapital: string,
          - secured: boolean,
          - symbol: string,
          - title: string,
          - totalTokenSupply: string,
          - tradingPercent: string
        - className: string (optional)
        - role: string (optional)
        - texts: Object
          - endOfTerm: string
          - financing: string
          - interest: string
          - remaining: string
          - trading: string
      `,
    () => {
      const onClick = action('Clicked Invest Function')
      const assetData = {
        address: 'Weinmeisterstraße 12-14 Berlin',
        currentTokenSupply: '9',
        endTerm: '2018-10-31T00:00:00.000Z',
        financingVolume: '269860',
        imgSrc: AssetImage,
        interest: '7.0',
        investedCapital: '125000',
        secured: true,
        symbol: 'TST',
        title: 'Hannover Mitter',
        tokenTotalSupply: '10',
        tradingPercent: '102.53'
      }
      const texts = {
        endOfTerm: 'End of sale',
        financing: 'Financing vol.',
        interest: 'Interest PA',
        poaTokenTooltip: `${assetData.symbol} is the name of this PoA-Token`,
        remaining: 'remaining',
        trading: 'Trading Course'
      }

      return (
        <StoryWrapper>
          <AssetBox assetData={assetData} texts={texts} onClick={onClick} />
        </StoryWrapper>
      )
    }
  )
