// @flow
import React from 'react'
import { shallow, mount } from 'enzyme'
import AssetBox from '.'
import {
  Image,
  InfoWrapper,
  Title,
  ShortDescription,
  TradingPercent,
  SpecsTable,
  SpecsCell,
  SpecsTitle,
  SpecsDetail,
  RemainingInvestment,
  Tokens,
  Status
} from './Wrappers'

const defaultProps = () => ({
  assetData: {
    address: 'Weinmeisterstraße 12-14 Berlin',
    currentTokenSupply: '5',
    endTerm: '2018-10-31T00:00:00.000Z',
    financingVolume: '269860',
    imgSrc: 'pimpam.png',
    interest: '7.0',
    investedCapital: '125000',
    secured: true,
    symbol: 'TST',
    title: 'Hannover Mitter',
    totalTokenSupply: '10',
    tradingPercent: '102.53'
  },
  texts: {
    endOfTerm: 'End of term',
    financing: 'Financing vol.',
    interest: 'Interest PA',
    poaTokenTooltip: 'TST is the name of the POA Token',
    remaining: 'remaining',
    trading: 'Trading Course'
  }
})

describe('components/BoxElements/AssetBox', () => {
  let renderedComponent
  let props

  describe('when is mounted', () => {
    beforeEach(() => {
      props = defaultProps()

      renderedComponent = mount(<AssetBox {...props} />)
    })

    it('should display an image', () => {
      expect(renderedComponent.find(Image)).toHaveLength(1)
    })

    it('should display a title', () => {
      expect(
        renderedComponent
          .find(InfoWrapper)
          .find(Title)
          .text()
      ).toEqual(props.assetData.title)
    })

    it('should display a address', () => {
      expect(
        renderedComponent
          .find(InfoWrapper)
          .find(ShortDescription)
          .at(0)
          .text()
      ).toEqual(props.assetData.address)
    })

    it('should display a trading percentage', () => {
      expect(
        renderedComponent
          .find(InfoWrapper)
          .find(TradingPercent)
          .text()
      ).toEqual(`${props.assetData.tradingPercent}%`)
    })

    it('should display a trading course wording', () => {
      expect(
        renderedComponent
          .find(InfoWrapper)
          .find(ShortDescription)
          .at(1)
          .text()
      ).toEqual('Trading Course')
    })

    describe('when AssetBox has a specs table', () => {
      let specsTableCells

      beforeEach(() => {
        specsTableCells = renderedComponent.find(SpecsTable).find(SpecsCell)
      })

      it('should display the interest rate in percent', () => {
        expect(
          specsTableCells
            .at(0)
            .find(SpecsTitle)
            .text()
        ).toEqual(`${props.assetData.interest}%`)
      })

      it('should display a label for the interest rate', () => {
        expect(
          specsTableCells
            .at(0)
            .find(SpecsDetail)
            .text()
        ).toEqual('Interest PA')
      })

      it('should display an end date', () => {
        expect(
          specsTableCells
            .at(1)
            .find(SpecsTitle)
            .text()
        ).toEqual('31/10/18')
      })

      it("should display a label for the investment period's end date", () => {
        expect(
          specsTableCells
            .at(1)
            .find(SpecsDetail)
            .text()
        ).toEqual('End of term')
      })

      it('should display the total financing volume', () => {
        expect(
          specsTableCells
            .at(2)
            .find(SpecsTitle)
            .text()
        ).toEqual('269,860€')
      })

      it('should display a label for the total financing volume', () => {
        expect(
          specsTableCells
            .at(2)
            .find(SpecsDetail)
            .text()
        ).toEqual('Financing vol.')
      })
    })

    it('should display a progress bar indicating the time that is left to buy this POA token', () => {
      expect(renderedComponent.find(RemainingInvestment)).toHaveLength(1)
    })

    it('should display remaining tokens', () => {
      expect(renderedComponent.find(Tokens).text()).toEqual(
        `${props.assetData.currentTokenSupply} PoA-Tokens (${props.assetData
          .symbol}) for sale`
      )
    })

    it('should display the status "remaining"', () => {
      expect(renderedComponent.find(Status).text()).toEqual('remaining')
    })
  })

  it('should match snapshot', () => {
    renderedComponent = shallow(<AssetBox {...defaultProps()} />)
    expect(renderedComponent).toMatchSnapshot()
  })
})
