// @flow
import React, { Component } from 'react'
import monetize from 'formatters/monetize'
import {
  SlidersWrapper,
  Estimate,
  SlidersTitle,
  FlexWrapper,
  SlidersResultBox,
  SlidersResultAmount,
  SlidersResultText,
  TitleWrapper
} from './Wrappers'

import Slider from './components/Slider'
import Dropdown from './components/Dropdown'

type State = {
  tradeVol: number,
  tradeFreq: number,
  savingsCalcType: string
}

type Props = {}

class Sliders extends Component<Props, State> {
  state: State = {
    tradeVol: 0,
    tradeFreq: 0,
    savingsCalcType: 'etf'
  }

  brickBlockFee = 0.005
  savingsCalcTypeOptions = [
    {
      name: 'ETF',
      value: 'etf'
    },
    {
      name: 'Real Estate',
      value: 'realEstate'
    }
  ]

  calcEtfSavings = (tradeVol: number, tradeFreq: number): number => {
    if (!tradeVol || !tradeFreq) return 0
    const tradingFeeFlat = 4.9
    const tradingFeePerc = 0.0025
    const exchangeFee = 0.000025
    const brokerFee = 3
    const escrowFee = 1.95

    const tradingFee = tradingFeeFlat + tradeVol * tradingFeePerc
    let tradingFeesTotal = tradingFee * tradeVol
    if (tradingFeesTotal < 9.9) {
      tradingFeesTotal = 9.9
    } else if (tradingFeesTotal > 59.9) {
      tradingFeesTotal = 59.9
    }

    let exchangeFeesTotal =
      exchangeFee * tradeVol < 2.5 ? 2.5 : exchangeFee * tradeVol
    const regTotal =
      tradingFeesTotal + exchangeFeesTotal + brokerFee + escrowFee

    const brickBlockTotal = this.brickBlockFee * tradeVol

    const savings = (regTotal - brickBlockTotal) * tradeFreq

    return savings
  }

  calcRealEstateSavings = (tradeVol: number, tradeFreq: number): number => {
    if (!tradeVol || !tradeFreq) return 0
    const issueSurcharge = 0.05
    const escrowFee = 0.0006
    const regTotal = tradeVol * (issueSurcharge + escrowFee)
    const brickBlockTotal = this.brickBlockFee * tradeVol
    const savings = (regTotal - brickBlockTotal) * tradeFreq

    return savings
  }

  chooseSavingsCalc = (calcType: string): number => {
    const tradeStats = [this.state.tradeVol, this.state.tradeFreq]
    switch (calcType) {
      case 'etf':
        return this.calcEtfSavings(...tradeStats)
      case 'realEstate':
        return this.calcRealEstateSavings(...tradeStats)
      default:
        return this.calcEtfSavings(...tradeStats)
    }
  }

  handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  render() {
    return (
      <SlidersWrapper>
        <Estimate>estimate your savings</Estimate>
        <FlexWrapper>
          <TitleWrapper>
            <SlidersTitle>
              figure out what you would save with brickblock when investing your
              funds into
            </SlidersTitle>
            <Dropdown
              name="savingsCalcType"
              options={this.savingsCalcTypeOptions}
              handleChange={this.handleChange}
              value={this.state.savingsCalcType}
            />
          </TitleWrapper>
          <SlidersResultBox>
            <SlidersResultAmount>
              {monetize(this.chooseSavingsCalc(this.state.savingsCalcType))}
            </SlidersResultAmount>
            <SlidersResultText>Your Brickblock savings</SlidersResultText>
          </SlidersResultBox>
          <Slider
            title="How much do you invest per trade"
            min={0}
            max={500}
            value={this.state.tradeVol}
            name="tradeVol"
            handleChange={this.handleChange}
            tickCount={8}
          />
          <Slider
            title="How many trades do you execute:"
            min={0}
            max={6000}
            value={this.state.tradeFreq}
            name="tradeFreq"
            handleChange={this.handleChange}
            tickCount={8}
          />
        </FlexWrapper>
      </SlidersWrapper>
    )
  }
}

export default Sliders
