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

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

        #### Props:
        ---
        - children: Node
        - contractData: Object
          - contractAddress: string (Ethereum addres on contract)
          - contractBalance: string
          - creationISOstring: string (ISO Date string of creation of the contract)
          - expireISOstring: string
          - ownerBalance: string (Owner tokens balance)
          - pricePOAtokenInETH: string (Price of a POA Token)
          - stage: Object
            - number: string (Stage number)
            - status: string (Stage Status: Funding...)
          - tokensFunded: string
          - tokenTotalSupply: string (Total of tokens in that asset)

        - texts: Object (Texts used for i18n)
          - stage: string,
          - contractAddress: string
          - created: string
          - countdown: string
          - price: string
          - symbol: string
          - tokensFunded: string
          - yourBalance: string
          - totalBalance: string
          - remaining: string
          - noticeMessage: string
      `,
    () => {
      const onClick = action('Clicked Invest More Function')
      const contractData = {
        contractAddress: '0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1',
        contractBalance: '816',
        creationISOstring: '2017-01-01T00:00:00.000Z',
        expireISOstring: '2017-12-13T00:00:00.000Z',
        ownerBalance: '1.27',
        poaTokenCurrencySymbol: 'ETH',
        pricePOATokenInETH: '1.56',
        stage: {
          number: '1',
          status: 'Funding'
        },
        tokensFunded: '137',
        tokenTotalSupply: '1000'
      }

      const texts = {
        contractAddress: 'Smart contract address:',
        countdown: 'Remaining time:',
        created: 'For sale since:',
        noticeMessage: "You won't be charged",
        poaTokenTooltip: `UDL is the name of this PoA-Token`,
        price: 'PRICE PER',
        remaining: 'remaining',
        stage: 'Stage',
        symbol: 'UDL',
        tokensFunded: 'Tokens Funded',
        totalBalance: 'Total Balance',
        yourBalance: 'Your Balance'
      }

      return (
        <StoryWrapper>
          <InvestmentBox secured contractData={contractData} texts={texts}>
            <strong
              onClick={onClick}
              style={{ display: 'block', width: '250px' }}
            >
              Invest Now
            </strong>
          </InvestmentBox>
        </StoryWrapper>
      )
    }
  )
