// @flow
import moment from 'moment'
import monetize from 'formatters/monetize'
import React from 'react'

import {
  AssetWrapper,
  Image,
  InfoWrapper,
  InvestmentInfoWrapper,
  LocationIcon,
  RemainingInvestment,
  RemainingInvestmentWrapper,
  SecuredMark,
  Separator,
  ShortDescription,
  SpecsCell,
  SpecsDetail,
  SpecsTable,
  SpecsTitle,
  Status,
  Title,
  Tokens,
  TokenUnit,
  TradingPercent
} from './Wrappers'
import { percentage } from 'formatters/maths'

export type AssetDataT = {
  address: string,
  currentTokenSupply: string,
  endTerm: string,
  financingVolume: string,
  imgSrc: string,
  interest: string,
  investedCapital: string,
  secured: boolean,
  symbol: string,
  title: string,
  totalTokenSupply: string,
  tradingPercent: string
}

type Props = {
  assetData: AssetDataT,
  className?: string,
  role?: string,
  texts: {
    endOfTerm: string,
    financing: string,
    interest: string,
    poaTokenTooltip: string,
    remaining: string,
    trading: string
  }
}

const AssetBox = ({ role, className, assetData, texts }: Props) => {
  const {
    address,
    currentTokenSupply,
    endTerm,
    financingVolume,
    imgSrc,
    interest,
    secured,
    symbol,
    title,
    totalTokenSupply,
    tradingPercent
  } = assetData

  const currentTokenSupplyAsPercentage = percentage(
    parseFloat(currentTokenSupply),
    parseFloat(totalTokenSupply)
  )

  return (
    <AssetWrapper role={role} className={className}>
      <Image graphicsUrl={imgSrc}>
        {secured && <SecuredMark>secured</SecuredMark>}
      </Image>
      <InfoWrapper>
        <Title>{title}</Title>
        <ShortDescription>
          <LocationIcon />
          {address}
        </ShortDescription>
        <TradingPercent>{tradingPercent}%</TradingPercent>
        <ShortDescription>{texts.trading}</ShortDescription>
      </InfoWrapper>
      <InvestmentInfoWrapper>
        <SpecsTable>
          <tbody>
            <tr>
              <SpecsCell>
                <SpecsTitle>{interest}%</SpecsTitle>
                <SpecsDetail>{texts.interest}</SpecsDetail>
                <Separator />
              </SpecsCell>
              <SpecsCell>
                <SpecsTitle>{moment(endTerm).format('DD/MM/YY')}</SpecsTitle>
                <SpecsDetail>{texts.endOfTerm}</SpecsDetail>
                <Separator />
              </SpecsCell>
              <SpecsCell>
                <SpecsTitle>{monetize(financingVolume)}</SpecsTitle>
                <SpecsDetail>{texts.financing}</SpecsDetail>
              </SpecsCell>
            </tr>
          </tbody>
        </SpecsTable>
        <RemainingInvestmentWrapper>
          <RemainingInvestment percent={currentTokenSupplyAsPercentage} />
        </RemainingInvestmentWrapper>
        <Tokens>
          {`${currentTokenSupply} PoA-Tokens`}
          <TokenUnit title={texts.poaTokenTooltip}> ({symbol}) </TokenUnit>
          for sale
        </Tokens>
        <Status percent={currentTokenSupplyAsPercentage}>
          {texts.remaining}
        </Status>
      </InvestmentInfoWrapper>
    </AssetWrapper>
  )
}
AssetBox.displayName = 'AssetBox'

export default AssetBox
