import React from 'react'
import { storiesOf, action } from '@storybook/react'
import DetailAsset from '.'
import StoryWrapper from 'storybookComponents/StoryWrapper'
import AssetImage from './assets/asset-photo.png'
import ThumbsUp from './assets/thumbs-up.svg'

storiesOf('Detail Asset', module).addWithInfo(
  'basic usage',
  `
        This is the basic usage of the Detail Asset.

        #### Props:
        ---
      `,
  () => {
    const onClick = action('Clicked Calculate/Invest Function')
    const assetData = {
      imgSrc: '',
      secured: true,
      title: 'Hannover Mitter',
      address: 'Weinmeisterstraße 12-14 · Neuköln · Berlin · 20156',
      tradingPercent: '102.53',
      interest: '7.0',
      endTerm: '2018-10-31T00:00:00.000Z',
      financingVolume: '269860',
      token: '0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1',
      investedCapital: '125000'
    }

    const completeAssetData = {
      videoSrc: AssetImage,
      brochureLink: 'http://',
      assetData,
      generalInfo: {
        locationGmaps:
          'https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d2427.442342654068!2d13.403372715807677!3d52.52543047981514!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2ses!4v1508494946021',
        propertySpecs: [
          {
            label: '5 rooms',
            iconSrc: ThumbsUp
          },
          {
            label: 'Good Feedback',
            iconSrc: ThumbsUp
          },
          {
            label: 'Security Safe',
            iconSrc: ThumbsUp
          },
          {
            label: 'Medium Quality',
            iconSrc: ThumbsUp
          }
        ],
        description:
          "In celebration of being a band for 10 years, and in order to make some room for new stock, we're kicking off a pretty rad sale on nearly all of our merch. Possibly the raddest one we've ever had...or is it most rad? In celebration of being a band for 10 years, and in order to make some room for new stock, we're kicking off a pretty rad sale on nearly all of our merch. Possibly the raddest one we've ever had...or is it most rad?In celebration of being a band for 10 years, and in order to make some room for new stock, we're kicon"
      },
      investmentInfo: {
        investmentChartData: [],
        propertySpecs: [
          {
            label: 'Baujahr',
            value: 'ca. 1900'
          },
          {
            label: '8 Wohneinheiten insg.',
            value: 'ca. 600 m2'
          },
          {
            label: 'Grundstücksgröße',
            value: 'ca. 395 m2'
          },
          {
            label: 'Gesamtnutzfläche',
            value: 'ca. 600 m2'
          }
        ],
        investmentSpecs: [
          {
            label: 'Nettokaltmiete (Soll)* p.a.',
            value: 'ca. € 55.199,-- '
          },
          {
            label: 'Rendite in %',
            value: '(Soll) 4,09'
          },
          {
            label: 'Nettokaltmiete (Ist) p.a.',
            value: 'ca. € 46.236,--'
          },
          {
            label: 'Rendite in %',
            value: '(Ist) 3,42'
          },
          {
            label: 'Faktor (Soll)',
            value: '24,46'
          },
          {
            label: 'Kaufpreis pro m2',
            value: '€ 2.249'
          },
          {
            label: 'Faktor (Ist)',
            value: '29,20'
          }
        ],
        price: {
          label: 'Kaufpreis',
          value: '1350000'
        }
      }
    }

    const contractData = {
      stage: {
        number: '1',
        status: 'Funding'
      },
      contractAddress: '0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1',
      creationISOstring: '2017-01-01T00:00:00.000Z',
      expireISOstring: '2017-12-13T00:00:00.000Z',
      pricePOAtoken: '1.56',
      poaTokenCurrencySymbol: 'ETH',
      contractBalance: '616',
      ownerBalance: '32',
      tokenTotalSupply: '1000'
    }

    const texts = {
      contractAddress: 'Smart contract address:',
      countdown: 'Remaining time:',
      created: 'Created on:',
      noticeMessage: "You won't be charged",
      price: 'PRICE PER',
      remaining: 'remaining',
      stage: 'Stage',
      symbol: 'UDL',
      tokensFunded: 'Tokens Funded',
      totalBalance: 'Total Balance',
      yourBalance: 'Your Balance'
    }

    return (
      <StoryWrapper height="2200px">
        <DetailAsset
          completeAssetData={completeAssetData}
          contractData={contractData}
          onClick={onClick}
          texts={texts}
        />
      </StoryWrapper>
    )
  }
)
