// @flow
import React from 'react'
import moment from 'moment'
import CountDown from 'components/CountDown'

import { Tokens, TokenUnit } from 'components/BoxElements/AssetBox/Wrappers'
import {
  StageWrapper,
  StatusBall,
  StageDetail,
  DetailValue,
  Detail,
  TokenSupply,
  ContractAddress
} from './Wrappers'

type Props = {
  stage: {
    number: string,
    status: string
  },
  contractAddress: string,
  creationISOstring: string,
  expireISOstring: string,
  pricePOATokenInETH: string,
  texts: {
    stage: string,
    contractAddress: string,
    created: string,
    countdown: string,
    poaTokenTooltip: string,
    price: string,
    symbol: string
  }
}

const Stage = ({
  stage,
  contractAddress,
  creationISOstring,
  expireISOstring,
  pricePOATokenInETH,
  texts
}: Props) => {
  return (
    <StageWrapper>
      <StatusBall stageNumber={stage.number} />
      {texts.stage} {stage.number}: {stage.status}
      <StageDetail>
        <Detail>{texts.contractAddress}</Detail>
        <DetailValue>
          <ContractAddress
            href={`https://ropsten.etherscan.io/address/${contractAddress}`}
            target="_blank"
          >
            {contractAddress}
          </ContractAddress>
        </DetailValue>
      </StageDetail>
      <StageDetail>
        <Detail>{texts.created}</Detail>
        <DetailValue>
          {moment(creationISOstring).format('DD/MM/YYYY')}
        </DetailValue>
      </StageDetail>
      <StageDetail>
        <Detail>{texts.countdown}</Detail>
        <DetailValue noLimit>
          <CountDown
            targetDate={expireISOstring}
            startDelay={150}
            interval={1000}
            timeSeparator={' : '}
            format={{
              day: 'dd',
              hour: 'HH',
              minute: 'MM',
              second: 'SS'
            }}
            leadingZero
          />
        </DetailValue>
      </StageDetail>
      <TokenSupply>{pricePOATokenInETH} ETH</TokenSupply>
      <Tokens title={texts.poaTokenTooltip} offsetLeft="10px">
        {`${texts.price} POA TOKEN `}
        <TokenUnit>({texts.symbol})</TokenUnit>
      </Tokens>
    </StageWrapper>
  )
}

export default Stage
