// @flow

import React from 'react'
import monetize from 'formatters/monetize'
import MenuItem from '../MenuItem'
import {
  InvestmentDetailWrapper,
  MenuWrapper,
  InfoWrapper,
  InvestmentDetailTitle,
  Spacer,
  LineChart,
  DetailText,
  DetailBoldText,
  DetailWrapper,
  SpecsWrapper,
  SpecPrice,
  PriceText,
  GoogleMaps,
  PropertyWrapper,
  IconSpecWrapper,
  LabelSpec,
  DetailTextWrapper,
  GmapsIframe
} from './Wrappers'

export type IconSpec = {
  label: string,
  iconSrc: string
}

export type GeneralInfoT = {
  propertySpecs: IconSpec[],
  locationGmaps: string,
  description: string
}

export type DataPointsT = {
  x: number,
  y: number
}

export type InvestmentChartDataT = {
  dataPoints: DataPointsT[],
  legend: string
}

export type SpecText = {
  label: string,
  value: string
}

export type InvestmentInfoT = {
  investmentChartData: InvestmentChartDataT[],
  propertySpecs: SpecText[],
  investmentSpecs: SpecText[],
  price: SpecText
}

type Props = {
  generalInfo: GeneralInfoT,
  investmentInfo: InvestmentInfoT
}

type State = {
  toggle: boolean
}

class InvestmentDetail extends React.Component<Props, State> {
  state: State = {
    toggle: true
  }
  toggleIt = () => {
    this.setState({ toggle: !this.state.toggle })
  }

  render() {
    const { generalInfo, investmentInfo } = this.props
    return (
      <InvestmentDetailWrapper>
        <MenuWrapper>
          <MenuItem
            label="GENERAL INFO"
            active={this.state.toggle}
            onClick={this.toggleIt}
          />
          <MenuItem
            label="INVESTMENT INFO"
            active={!this.state.toggle}
            onClick={this.toggleIt}
          />
        </MenuWrapper>

        <InfoWrapper visible={!this.state.toggle}>
          <InvestmentDetailTitle>Property specifications</InvestmentDetailTitle>
          <SpecsWrapper>
            {investmentInfo.propertySpecs.map(({ label, value }, index) => (
              <DetailWrapper key={index}>
                <DetailText>{label}</DetailText>
                <DetailBoldText>{value}</DetailBoldText>
              </DetailWrapper>
            ))}
          </SpecsWrapper>
          <Spacer />
          <InvestmentDetailTitle>Investment KPIs</InvestmentDetailTitle>
          <SpecsWrapper>
            {investmentInfo.investmentSpecs.map(({ label, value }, index) => (
              <DetailWrapper key={index}>
                <DetailText>{label}</DetailText>
                <DetailBoldText>{value}</DetailBoldText>
              </DetailWrapper>
            ))}
            <SpecPrice>
              <DetailWrapper>
                <DetailText>{investmentInfo.price.label}</DetailText>
                <PriceText>{monetize(investmentInfo.price.value)}</PriceText>
              </DetailWrapper>
            </SpecPrice>
          </SpecsWrapper>
          <Spacer />
          <InvestmentDetailTitle>Price growth over years</InvestmentDetailTitle>
          <LineChart />
        </InfoWrapper>

        <InfoWrapper visible={this.state.toggle}>
          <InvestmentDetailTitle>Property specifications</InvestmentDetailTitle>
          <SpecsWrapper>
            {generalInfo.propertySpecs.map(({ iconSrc, label }, index) => (
              <PropertyWrapper key={index}>
                <IconSpecWrapper iconSrc={iconSrc} />
                <LabelSpec>{label}</LabelSpec>
              </PropertyWrapper>
            ))}
          </SpecsWrapper>
          <Spacer />
          <InvestmentDetailTitle>General Description</InvestmentDetailTitle>
          <DetailTextWrapper>
            <DetailText
              dangerouslySetInnerHTML={{ __html: generalInfo.description }}
            />
          </DetailTextWrapper>
          <Spacer />
          <InvestmentDetailTitle>Property Location</InvestmentDetailTitle>
          <GoogleMaps>
            <GmapsIframe src={generalInfo.locationGmaps} />
          </GoogleMaps>
        </InfoWrapper>
      </InvestmentDetailWrapper>
    )
  }
}

export default InvestmentDetail
