// @flow
import React from 'react'

import Stage from './components/Stage'
import ArrowsInMovement from 'components/Buttons/Contribute/ArrowsInMovement'
import {
  RemainingInvestment,
  RemainingInvestmentWrapper,
  Separator,
  SpecsCell,
  SpecsDetail,
  SpecsTable,
  SpecsTitle,
  Status,
  Tokens,
  TokenUnit
} from 'components/BoxElements/AssetBox/Wrappers'
import {
  InvestButtonWrapper,
  InvestmentInfoWrapper,
  InvestmentWrapper,
  SecuredMark,
  SmallDescription,
  TokensFunded,
  Whitener
} from './Wrappers'
import { percentage } from 'formatters/maths'

import type { Node } from 'react'

export type ContractDataT = {
  contractAddress: string,
  contractBalance: string,
  creationISOstring: string,
  expireISOstring: string,
  ownerBalance: string,
  pricePOATokenInETH: string,
  stage: {
    number: string,
    status: string
  },
  tokensFunded: string,
  tokenTotalSupply: string
}

export type TextIsI18nT = {
  contractAddress: string,
  countdown: string,
  created: string,
  noticeMessage: string,
  poaTokenTooltip: string,
  price: string,
  remaining: string,
  stage: string,
  symbol: string,
  tokensFunded: string,
  totalBalance: string,
  yourBalance: string
}

export const isDisabled = (investmentRemaining: string, stageNumber: string) =>
  parseInt(stageNumber) > 1 || parseFloat(investmentRemaining) === 0

type Props = {
  children: Node,
  contractData: ContractDataT,
  secured: boolean,
  texts: TextIsI18nT
}

const InvestmentBox = ({ secured, contractData, texts, children }: Props) => {
  const {
    contractAddress,
    contractBalance,
    creationISOstring,
    expireISOstring,
    ownerBalance,
    pricePOATokenInETH,
    stage,
    tokensFunded,
    tokenTotalSupply
  } = contractData

  const contractBalanceAsPercentage = percentage(
    parseFloat(contractBalance),
    parseFloat(tokenTotalSupply)
  )

  return (
    <InvestmentWrapper>
      {secured && <SecuredMark>secured</SecuredMark>}
      <Stage
        stage={stage}
        contractAddress={contractAddress}
        pricePOATokenInETH={pricePOATokenInETH}
        creationISOstring={creationISOstring}
        expireISOstring={expireISOstring}
        texts={{
          stage: texts.stage,
          contractAddress: texts.contractAddress,
          created: texts.created,
          countdown: texts.countdown,
          poaTokenTooltip: texts.poaTokenTooltip,
          price: texts.price,
          symbol: texts.symbol
        }}
      />
      <InvestmentInfoWrapper>
        <SpecsTable>
          <tbody>
            <tr>
              <SpecsCell>
                <SpecsTitle>
                  <TokensFunded>
                    {tokensFunded} {texts.symbol}
                  </TokensFunded>
                </SpecsTitle>
                <SpecsDetail>{texts.tokensFunded}</SpecsDetail>
                <Separator />
              </SpecsCell>
              <SpecsCell hide={ownerBalance === '0'}>
                <SpecsTitle>
                  {ownerBalance} {texts.symbol}
                </SpecsTitle>
                <SpecsDetail>{texts.yourBalance}</SpecsDetail>
                <Separator />
              </SpecsCell>
              <SpecsCell>
                <SpecsTitle>
                  {tokenTotalSupply} {texts.symbol}
                </SpecsTitle>
                <SpecsDetail>{texts.totalBalance}</SpecsDetail>
              </SpecsCell>
            </tr>
          </tbody>
        </SpecsTable>
        <RemainingInvestmentWrapper>
          <RemainingInvestment percent={contractBalanceAsPercentage} />
        </RemainingInvestmentWrapper>
        <Tokens>
          {`${contractBalance} PoA-Tokens`}
          <TokenUnit title={texts.poaTokenTooltip}>
            &nbsp;({texts.symbol})&nbsp;
          </TokenUnit>
        </Tokens>
        <Status percent={contractBalanceAsPercentage}>{texts.remaining}</Status>
        <InvestButtonWrapper
          disabled={isDisabled(contractBalance, stage.number)}
        >
          {children}
          <Whitener>
            <ArrowsInMovement />
          </Whitener>
        </InvestButtonWrapper>
        <SmallDescription>{texts.noticeMessage}</SmallDescription>
      </InvestmentInfoWrapper>
    </InvestmentWrapper>
  )
}

export default InvestmentBox
